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?

Our Team

Stay tuned for more updates about our team and services. If you have any questions, feel free to click here.

Welcome back to our website! Let’s introduce you to our dedicated team.

John Doe

John is our lead web developer. He has over 10 years of experience in the field and specializes in JavaScript and Python.

Jane is our app development expert. She has a knack for designing user-friendly interfaces and has a deep understanding of Swift and Kotlin.

Mary Johnson

Mary heads our digital marketing team. She has a proven track record of successful SEO and social media campaigns.

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>