🔎🔍The Zoom Animation

The zoom animation is an animation that zooms or shrinks the content of a transition group. For live examples visit the animation demo page and select one of the zoom presets in the button filed at the top of the page.

Contents

• Why would I use this component?
• Usage
  • Basic usage
    • Clipping
  • Parametrized usage
  • Extended parametrized usage
    • Keyframes
    • Base
    • Extensions

Why would I use this component?

Astro allows users to create their own animations for view transitions. The astro-vtbot zoom animation is a ready-made solution that can be easily inserted into Astro’s transition:animate property. It also supports parameters for fine-tuning the animation to your needs. It is even possible to customize the underlying keyframes when used together with the <AnimationStyle/> component.

Usage

Install astro-vtbot in your project running npx astro add astro-vtbot or npm install astro-vtbot.

Basic usage

The most basic usage is to apply the zoom() animation without any parameters. This will use the default values for the animation.

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

The effect will zoom the old image to 500% while fading it out and it lets the new image grow from a point to 100% of its size while fading in. Reverse for the backwards direction. The animation will take 0.3 seconds and use the ease-in-out easing function.

Clipping

The zoom animation is not clipped, i.e. when zooming the image bigger it might cover the whole viewport. If you want to restrict the effect to the current animation group, see the description for the Swing animation.

Parametrized usage

The default values for the animation can be overwritten by passing an object with the desired values to the zoom() function. The following example shows how to change the duration and easing of the animation.

1
---
2
import { zoom } from "astro-vtbot/animations/zoom";
3
---
4
...
5
<h1 transition:animate={zoom({duration:'1.5s', easing: 'cubic-bezier(.16,.73,.05,1.52)' })}>Zoom</h1>
6
...

You can set the following parameters:

If you explicitly set a value for the delay, this value is used for both the in and out animation. This is typically not what you want. If you want to use different values for the in and out animation, use the customZoom function as described in the next section.

Extended parametrized usage

If you want to use more than the 5 properties supported by zoom() or want to have more control over the animations keyframes, you can use the customZoom() function. This function takes a name for the transition and an object with the following optional properties:

• keyframes: An object with parameters for the keyframes for the animation.
• base: An object with the same properties as the zoom() function.
• extensions: An object with arbitrary CSS properties to be used in the forwards/backwards old/new animation.

The function returns a scope identifier to be used with the data-astro-transition-scope attribute of the HTML element you want to animate. Under the hood, customZoom() generates a style sheet with keyframe information and the defined CSS properties. You need to add these extended styles to your page by using the <AnimationStyle/> component. Note: Only use <AnimationStyle/> in conjunction with customZoom(), not with zoom().

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

5
const zoomScope = customZoom('myZoom', {
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
...
15
<AnimationStyle name="myZoom"/>
16
<h1 data-astro-transition-scope={zoomScope}>Zoom</h1>
17
...

Keyframes

The keyframes object of the customZoom() function has the following properties:

1
type ZoomKeyframeParameter = {
2
  scale?: { forwardOut?: number; forwardIn?: number; backwardOut?: number; backwardIn?: number; };
3
  opacity?: { forwardOut?: number; forwardIn?: number; backwardOut?: number; backwardIn?: number; };
4
};

The forwardOut values say how big the old image should be zoomed when leaving the page (starting from it’s original size). The forwardIn value is the start value for the new image when entering the new page (before it is zoomed to its natural size). Values < 1 shrink the image, values > 1 enlarge it. The backwards values are for history back navigation. Opacity values follow the same logic.

The default values are all 0 with the exception of forwards.out.scale and backwards.in.scale which are 5.

The values are used as parameters of the keyframe definition in

1
@keyframes ${keyframeNamePrefix}FwdZoomOut {
2
    from {
3
      transform: scale(1);
4
      opacity: 1;
5
    }
6
    to {
7
      transform: scale(${forwardOutScale});
8
      opacity: ${forwardOutOpacity};
9
    }
10
  }
11
  @keyframes ${keyframeNamePrefix}FwdZoomIn {
12
    from {
13
      transform: scale(${forwardInScale});
14
      opacity: ${forwardInOpacity};
15
    }
16
    to {
17
      transform: scale(1);
18
      opacity: 1;
19
    }
20
  }
21
  @keyframes ${keyframeNamePrefix}BwdZoomOut {
22
    from {
23
      transform: scale(1);
24
      opacity: 1;
25
    }
26
    to {
27
      transform: scale(${backwardOutScale});
28
      opacity: ${backwardOutOpacity};
29
    }
30
  }
31
  @keyframes ${keyframeNamePrefix}BwdZoomIn {
32
    from {
33
      transform: scale(${backwardInScale});
34
      opacity: ${backwardInOpacity};
35
    }
36
    to {
37
      transform: scale(1);
38
      opacity: 1;
39
    }
40
  }

Base

The value of the base property is used to call the zoom() function as defined above.

Extensions

With the extensions property you can define all those CSS properties that can not be defined by zoom() directly. You can specify different values for forwards and backwards, in and out animations. These values are merged with the result of callingzoom() with base parameters and overwrite its properties.