Animation Examples
The following examples demonstrate what the editor's animation system can produce using custom keyframes. Each example is a self-contained Lexical JSON template — paste it into the JSON Editor to load it directly into your template and see how it works.
See Animations for a full reference on how to configure keyframes and animation rules in the editor.
button-hover-bounce
A button that lifts on hover with a magnetic-feel translateY + scale + brightness animation (magneticLift). A rainbow gradient glow ring pulses infinitely on the ::after pseudo-element while hovered (glowRingPulse).
Show JSON
{
"root": {
"type": "root",
"version": 1,
"direction": null,
"format": "",
"indent": 0,
"children": [
{
"type": "animation",
"version": 1,
"__presets": [],
"__customKeyframes": {
"magneticLift": "@keyframes magneticLift { 0% { transform: translateY(0) scale(1); filter: brightness(1); } 35% { transform: translateY(-14px) scale(1.07); filter: brightness(1.2); } 65% { transform: translateY(-11px) scale(1.05); filter: brightness(1.15); } 82% { transform: translateY(-13px) scale(1.06); } 100% { transform: translateY(-12px) scale(1.055); filter: brightness(1.18); } }",
"glowRingPulse": "@keyframes glowRingPulse { 0% { opacity: 0; transform: scale(0.92); filter: blur(4px); } 50% { opacity: 1; transform: scale(1.06); filter: blur(6px); } 100% { opacity: 0.8; transform: scale(1.03); filter: blur(5px); } }"
}
},
{
"type": "body",
"version": 1,
"direction": null,
"format": "",
"indent": 0,
"__css": {
"__className": "pBody01",
"__externalClassNames": "",
"__styles": {
"desktop": {
"__layout": {
"display": "flex",
"justifyContent": "center",
"alignItems": "center"
},
"minHeight": "240px",
"__backgroundGlobal": { "$backgroundColor": "#0f0e17" },
"background": ["#0f0e17"]
}
},
"__stylesStates": {}
},
"__attributes": {},
"__dynamicAttributes": {},
"children": [
{
"type": "button-link",
"version": 1,
"__href": "#",
"__label": "Hover Me",
"__target": "_self",
"__css": {
"__className": "pBtn01",
"__externalClassNames": "",
"__styles": {
"desktop": {
"display": "inline-block",
"position": "relative",
"padding": "16px 40px",
"fontSize": "17px",
"fontWeight": "700",
"color": "#ffffff",
"borderRadius": "12px",
"cursor": "pointer",
"border": "none",
"letterSpacing": "0.5px",
"zIndex": "0",
"__backgroundGlobal": { "$backgroundColor": "#4f46e5" },
"background": ["#4f46e5"],
"__animation": [
{
"$id": "rule-btn01-hover-lift",
"$type": "custom",
"$keyframeName": "magneticLift",
"$triggerEvent": "hover",
"$targetElement": "",
"$duration": "700ms",
"$timingFunction": "cubic-bezier(0.34,1.56,0.64,1)",
"$delay": "0ms",
"$iterationCount": "1",
"$direction": "normal",
"$fillMode": "forwards",
"$playState": "running"
},
{
"$id": "rule-btn01-hover-glow",
"$type": "custom",
"$keyframeName": "glowRingPulse",
"$triggerEvent": "hover",
"$targetElement": "",
"$pseudoElement": "::after",
"$customProperties": {
"content": "\"\"",
"position": "absolute",
"inset": "-6px",
"border-radius": "16px",
"z-index": "-1",
"background": "linear-gradient(135deg, #7c3aed, #ec4899, #f59e0b, #06b6d4)"
},
"$duration": "900ms",
"$timingFunction": "ease-in-out",
"$delay": "0ms",
"$iterationCount": "infinite",
"$direction": "alternate",
"$fillMode": "both",
"$playState": "running"
}
]
}
},
"__stylesStates": {}
},
"__attributes": {},
"__dynamicAttributes": {}
}
]
}
]
}
}
button-click-tada
A button with a dramatic click burst — a 9-stop explosionPop keyframe that squishes, pops, and settles using an elastic cubic-bezier timing function. More physical than the preset tada.
Show JSON
{
"root": {
"type": "root",
"version": 1,
"direction": null,
"format": "",
"indent": 0,
"children": [
{
"type": "animation",
"version": 1,
"__presets": [],
"__customKeyframes": {
"explosionPop": "@keyframes explosionPop { 0% { transform: scale(1) rotate(0deg); filter: brightness(1); } 12% { transform: scale(0.78) rotate(-6deg); filter: brightness(0.9); } 28% { transform: scale(1.35) rotate(5deg); filter: brightness(1.25); } 42% { transform: scale(0.88) rotate(-4deg); filter: brightness(1.1); } 56% { transform: scale(1.22) rotate(3deg); filter: brightness(1.2); } 70% { transform: scale(0.94) rotate(-1.5deg); filter: brightness(1.05); } 84% { transform: scale(1.1) rotate(0.5deg); } 92% { transform: scale(0.98) rotate(0deg); } 100% { transform: scale(1) rotate(0deg); filter: brightness(1); } }"
}
},
{
"type": "body",
"version": 1,
"direction": null,
"format": "",
"indent": 0,
"__css": {
"__className": "pBody02",
"__externalClassNames": "",
"__styles": {
"desktop": {
"__layout": {
"display": "flex",
"justifyContent": "center",
"alignItems": "center"
},
"minHeight": "240px",
"__backgroundGlobal": { "$backgroundColor": "#052e16" },
"background": ["#052e16"]
}
},
"__stylesStates": {}
},
"__attributes": {},
"__dynamicAttributes": {},
"children": [
{
"type": "button-link",
"version": 1,
"__href": "#",
"__label": "Click Me!",
"__target": "_self",
"__css": {
"__className": "pBtn02",
"__externalClassNames": "",
"__styles": {
"desktop": {
"display": "inline-block",
"padding": "16px 40px",
"fontSize": "17px",
"fontWeight": "700",
"color": "#ffffff",
"borderRadius": "50px",
"cursor": "pointer",
"border": "none",
"letterSpacing": "1px",
"textTransform": "uppercase",
"__backgroundGlobal": { "$backgroundColor": "#16a34a" },
"background": ["#16a34a"],
"__animation": [
{
"$id": "rule-btn02-click",
"$type": "custom",
"$keyframeName": "explosionPop",
"$triggerEvent": "click",
"$targetElement": "",
"$duration": "750ms",
"$timingFunction": "cubic-bezier(0.68,-0.55,0.265,1.55)",
"$delay": "0ms",
"$iterationCount": "1",
"$direction": "normal",
"$fillMode": "none",
"$playState": "running"
}
]
}
},
"__stylesStates": {}
},
"__attributes": {},
"__dynamicAttributes": {}
}
]
}
]
}
}
bg-color-cycle
A full-section background that cycles through indigo → pink → orange → green on an infinite 6-second loop using the bgColorCycle keyframe triggered on page load.
Show JSON
{
"root": {
"children": [
{
"type": "animation",
"version": 1,
"__presets": [],
"__customKeyframes": {
"bgColorCycle": "@keyframes bgColorCycle { 0% { background-color: #4f46e5; } 25% { background-color: #db2777; } 50% { background-color: #ea580c; } 75% { background-color: #16a34a; } 100% { background-color: #4f46e5; } }"
}
},
{
"children": [
{
"children": [
{
"detail": 0,
"format": 0,
"mode": "normal",
"style": "",
"text": "",
"type": "heading",
"version": 1,
"__css": {
"__className": "pHeading03",
"__externalClassNames": "",
"__styles": {
"desktop": {
"color": "#ffffff",
"fontSize": "32px",
"fontWeight": "700",
"textAlign": "center",
"paddingTop": "20px",
"paddingBottom": "20px",
"paddingLeft": "20px",
"paddingRight": "20px"
}
},
"__stylesStates": {}
},
"__attributes": {},
"__dynamicAttributes": { "__rules": [] }
}
],
"direction": null,
"format": "",
"indent": 0,
"type": "wrapper",
"version": 1,
"__css": {
"__className": "pSection03",
"__externalClassNames": "",
"__styles": {
"desktop": {
"width": "200px",
"__layout": {
"display": "flex",
"justifyContent": "center",
"alignItems": "center"
},
"__backgroundGlobal": { "$backgroundColor": "#4f46e5" },
"background": ["#4f46e5"],
"__animation": [
{
"$keyframeName": "bgColorCycle",
"$type": "custom",
"$id": "rule-bg03-load",
"$triggerEvent": "load",
"$targetElement": "",
"$duration": "3000ms",
"$timingFunction": "linear",
"$delay": "0ms",
"$iterationCount": "infinite",
"$direction": "normal",
"$fillMode": "forwards",
"$playState": "running"
}
],
"height": "100px"
}
},
"__stylesStates": {}
},
"__attributes": {},
"__dynamicAttributes": { "__rules": [] }
}
],
"direction": null,
"format": "",
"indent": 0,
"type": "body",
"version": 1,
"__css": {
"__className": "pBody03",
"__externalClassNames": "",
"__styles": {
"desktop": {
"__layout": {
"display": "flex",
"flexDirection": "column",
"justifyContent": "center",
"alignItems": "center"
},
"minHeight": "300px",
"fontFamily": "Inter, sans-serif"
}
},
"__stylesStates": {}
},
"__attributes": {},
"__dynamicAttributes": { "__rules": [] }
}
],
"direction": null,
"format": "",
"indent": 0,
"type": "root",
"version": 1
}
}
button-load-pulse
A two-animation button: a riseFromFog entrance on page load (rises from below with blur-to-sharp + slight bounce), and a shimmerPulse light sweep across the button on hover (a white diagonal stripe travelling left → right via ::after, wired using $customProperties).
Show JSON
{
"root": {
"children": [
{
"type": "animation",
"version": 1,
"__presets": [],
"__customKeyframes": {
"riseFromFog": "@keyframes riseFromFog { 0% { opacity: 0; transform: translateY(30px) scale(0.92); filter: blur(8px); } 60% { opacity: 1; transform: translateY(-4px) scale(1.03); filter: blur(0px); } 80% { transform: translateY(2px) scale(0.99); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); } }",
"shimmerPulse": "@keyframes shimmerPulse { 0% { opacity: 0; transform: translateX(-100%) skewX(-20deg); } 50% { opacity: 0.6; } 100% { opacity: 0; transform: translateX(200%) skewX(-20deg); } }"
}
},
{
"children": [
{
"detail": 0,
"format": 0,
"mode": "normal",
"style": "",
"text": "",
"type": "button-link",
"version": 1,
"__css": {
"__className": "pBtn04",
"__externalClassNames": "",
"__styles": {
"desktop": {
"display": "inline-block",
"position": "relative",
"overflow": "hidden",
"padding": "16px 40px",
"fontSize": "18px",
"fontWeight": "700",
"color": "#0f172a",
"borderRadius": "8px",
"cursor": "pointer",
"border": "none",
"__backgroundGlobal": { "$backgroundColor": "#fbbf24" },
"background": ["#fbbf24"],
"__animation": [
{
"$keyframeName": "riseFromFog",
"$type": "custom",
"$id": "rule-btn04-load-rise",
"$triggerEvent": "load",
"$targetElement": "",
"$duration": "900ms",
"$timingFunction": "cubic-bezier(0.22,1,0.36,1)",
"$delay": "300ms",
"$iterationCount": "1",
"$direction": "normal",
"$fillMode": "both",
"$playState": "running"
},
{
"$keyframeName": "shimmerPulse",
"$type": "custom",
"$id": "rule-btn04-hover-shimmer",
"$triggerEvent": "hover",
"$targetElement": "",
"$pseudoElement": "::after",
"$customProperties": {
"content": "\"\"",
"position": "absolute",
"top": "0",
"left": "0",
"width": "60%",
"height": "100%",
"background": "linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent)",
"pointer-events": "none"
},
"$duration": "700ms",
"$timingFunction": "ease",
"$delay": "0ms",
"$iterationCount": "infinite",
"$direction": "normal",
"$fillMode": "none",
"$playState": "running"
}
]
}
},
"__stylesStates": {}
},
"__attributes": {},
"__dynamicAttributes": { "__rules": [] },
"__href": "#",
"__target": "_self",
"__label": "Get Started"
}
],
"direction": null,
"format": "",
"indent": 0,
"type": "body",
"version": 1,
"__css": {
"__className": "pBody04",
"__externalClassNames": "",
"__styles": {
"desktop": {
"__layout": {
"display": "flex",
"justifyContent": "center",
"alignItems": "center"
},
"minHeight": "240px",
"__backgroundGlobal": { "$backgroundColor": "#0f172a" },
"background": ["#0f172a"]
}
},
"__stylesStates": {}
},
"__attributes": {},
"__dynamicAttributes": { "__rules": [] }
}
],
"direction": null,
"format": "",
"indent": 0,
"type": "root",
"version": 1
}
}