properties
changelog

Animation Presets

Use preset, animation combinations for common effects.

Usage:

  • @animate preset-*;

Reference

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

	properties: {
		animate: {
			preset: {
				property: "animation: <v><i>;",
				values: {
					// animation: name [duration] [flow] [delay] [loop] [path] [mode] [state];
					none: "none",
					spin: "spin 1s linear infinite",
					ping: `ping 1s theme(flow-ease-out) infinite`,
					pulse: `pulse 2s theme(flow-pulse) infinite`,
					bounce: "bounce 1s infinite",
					wiggle: "wiggle 1s theme(flow-ease-in-out) infinite",
				},
			},
		},
	},
};

export default shilpConfig;