Fade Animation

Apply fade in or fade out animations to elements.

Usage:

@animate fade-in-*;
@animate fade-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: {
			fade: {
				in: {
					property: "--entr-opct: <v><i>;",
					themeKey: "fractions",
					values: {
						DEFAULT: 1,
					},
				},

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

export default shilpConfig;

exit flow