Zoom Animation

Apply zoom in or zoom out animations to elements.

Usage:

@animate zoom-in-*;
@animate zoom-out-*;

warning

This must be used with enter and exit animation to take the effect.

info

This page contains only the property configuration reference. Complete documentation and usage examples will be added progressively in future updates.

Reference

shilp.config.js
const shilpConfig = {
	source: "react",

	properties: {
		animate: {
			zoom: {
				in: {
					property: "--entr-scl: <n><v><i>;",
					themeKey: "fractions",
					values: {
						DEFAULT: 1,
					},
				},

				out: {
					property: "--ext-scl: <n><v><i>;",
					themeKey: "fractions",
					values: {
						DEFAULT: 1,
					},
				},
			},
		},
	},
};

export default shilpConfig;

state animate intent