Clip animation

Use the buttons above to select an animation style. Then press the link in the demo web site below to see that animation in action. Use check checkbox to see how the clipped animation looks like. How do you do that?

Welcome to My Website

This is the first page of a sample website.
For more information about the team, click here.

About Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

Our Services

Web Development
App Development
Digital Marketing

How were these animations crafted?

All animations are made with Zoom, Swing and Move from the astro-vtbot package. In the code examples below you can see how they are parametrized.

By the way: The animation of the button grid at the top of this page was created by simply adding swing() to transition:animate.

1
---
2
import { swing } from "astro-vtbot/animations/swing";
3
---
4
<div transition:animate={swing()}>
5
  ...
6
</div>

Here are the codes for the other examples:

Zoom

1
---
2
import { zoom } from "astro-vtbot/animations/zoom";
3
---
4
<div transition:animate={zoom({ duration: '0.3s' })}>
5
  ...
6
</div>

1
---
2
import { customZoom } from "astro-vtbot/animations/zoom";
3
import AnimationStyle from "astro-vtbot/animations/AnimationStyle.astro";
4

5
const zoom2Scope = customZoom('zoom2', {
6
  keyframes: { scale: { forwardOut: 0, backwardIn: 0 } },
7
});
8
---
9
<AnimationStyle name="zoom2">
10
<div data-astro-transition-scope={zoom2Scope}>
11
  ...
12
</div>

1
---
2
import { customZoom } from "astro-vtbot/animations/zoom";
3
import AnimationStyle from "astro-vtbot/animations/AnimationStyle.astro";
4

5
const zoom3Scope = customZoom('zoom3', {
6
  keyframes: { scale: { forwardOut: 0, backwardIn: 0 } },
7
  base: { duration: '0.3s', easing: 'cubic-bezier(.16,.73,.05,1.52)' },
8
  extensions: {
9
    forwards: { new: { 'animation-delay': '0.2s' } },
10
    backwards: { new: { 'animation-delay': '0.2s' } },
11
  },
12
});
13
---
14
<AnimationStyle name="zoom3">
15
<div data-astro-transition-scope={zoom3Scope}>
16
  ...
17
</div>

Swing

1
---
2
import { customSwing } from "astro-vtbot/animations/swing";
3
import AnimationStyle from "astro-vtbot/animations/AnimationStyle.astro";
4

5
const swing1Scope = customSwing('swing1', {
6
  keyframes: { axis: { y: 1 }, angle: { leave: '90deg', enter: '-90deg' } },
7
  base: { duration: '300ms' },
8
  extensions: {
9
    forwards: {
10
      old: { 'transform-origin': 'center left' },
11
      new: { 'transform-origin': 'center right', 'animation-delay': '0.075s' },
12
    },
13
    backwards: {
14
      old: { 'transform-origin': 'center right' },
15
      new: { 'transform-origin': 'center left', 'animation-delay': '0.075s' },
16
    },
17
  },
18
});
19
---
20
<AnimationStyle name="swing1">
21
<div data-astro-transition-scope={swing1Scope}>
22
  ...
23
</div>

1
---
2
import { customSwing } from "astro-vtbot/animations/swing";
3
import AnimationStyle from "astro-vtbot/animations/AnimationStyle.astro";
4

5
const swing2Scope = customSwing('swing2', {
6
  keyframes: {
7
    axis: { z: 1 },
8
    angle: { leave: '180deg', enter: '-180deg' },
9
  },
10
  base: { duration: '0.3s' },
11
  extensions: {
12
    forwards: { new: { 'animation-delay': '0.15s' } },
13
    backwards: { new: { 'animation-delay': '0.15s' } },
14
  },
15
});
16
---
17
<AnimationStyle name="swing2">
18
<div data-astro-transition-scope={swing2Scope}>
19
  ...
20
</div>

1
---
2
import { customSwing } from "astro-vtbot/animations/swing";
3
import AnimationStyle from "astro-vtbot/animations/AnimationStyle.astro";
4

5
const swing3Scope = customSwing('swing3', {
6
  keyframes: { axis: { x: 1 } },
7
  base: { duration: '0.3s' },
8
  extensions: {
9
    forwards: {
10
      old: { 'transform-origin': 'top center' },
11
      new: { 'transform-origin': 'top center', 'animation-delay': '0.1s' },
12
    },
13
    backwards: {
14
      old: { 'transform-origin': 'top center' },
15
      new: { 'transform-origin': 'top center', 'animation-delay': '0.1s' },
16
    },
17
  },
18
});
19
---
20
<AnimationStyle name="swing3">
21
<div data-astro-transition-scope={swing3Scope}>
22
  ...
23
</div>

Move

1
---
2
import { move } from "astro-vtbot/animations/move";
3
---
4
<div transition:animate={move()}>
5
  ...
6
</div>

1
---
2
import { customMove } from "astro-vtbot/animations/move";
3
import AnimationStyle from "astro-vtbot/animations/AnimationStyle.astro";
4

5
const move2Scope = customMove('move2', {
6
  keyframes: {
7
    enter: { x: '100vw'},
8
    leave: { x: '-100vw'},
9
  },
10
  base: { duration: '0.5s', easing: 'linear' },
11
});
12
---
13
<AnimationStyle name="move2">
14
<div data-astro-transition-scope={move2Scope}>
15
  ...
16
</div>

1
---
2
import { customMove } from "astro-vtbot/animations/move";
3
import AnimationStyle from "astro-vtbot/animations/AnimationStyle.astro";
4

5
const move3Scope = customMove('move3', {
6
  keyframes: {
7
    enter: { y: '-50cm', z: '-50cm' },
8
    enterMid: { y: '10cm', z: '-25cm', angel: '10deg' },
9
    leaveMid: { y: '-10cm', z: '-25cm', angel: '-10deg' },
10
    leave: { y: '50cm', z: '50cm' },
11
    axis: { x: 1, y: 1, z: 1 }
12
  }
13
});
14
---
15
<AnimationStyle name="move3">
16
<div data-astro-transition-scope={move3Scope}>
17
  ...
18
</div>