56:I[473921,["/creators-assets/_next/static/immutable/chunks/456dxp3afc8vw.js","/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0bntpu9zyiup3.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/3npaj8f4glbs_.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/2knggklfeqwdv.js","/creators-assets/_next/static/immutable/chunks/18e_sauhpyyit.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2n9qmawfhavju.js","/creators-assets/_next/static/immutable/chunks/0m8lhf01xskqj.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/2lxef2-u417vc.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/439i_r5_4eszl.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 57:Tdd8,

AnimSequencer is a visual CSS keyframe animation builder for Framer. Build animations interactively inside the plugin — set properties at each keyframe, drag the timeline, pick an easing, and AnimSequencer writes the code for you. The output is a production-ready Framer Code Override you can apply to any layer instantly.

Built for designers who want real animation control without touching code, and developers who want to skip the boilerplate.

Quick Start

Open AnimSequencer from the Framer Plugin menu
A default Fade In animation loads automatically — hit ▶ Play to preview it
Adjust Duration, Delay, Easing, and other settings to your liking
Build your keyframes on the timeline — drag markers, toggle properties, set values
Go to the Code tab → click Create Override File
In Framer, select any layer → open the Override panel → apply it

The Editor Tab

Timeline Drag diamond markers to reposition keyframes (0–100%). Click to select, use + to add new ones, and set exact positions via the input below. Minimum 2 keyframes required.

Keyframe Properties Toggle on any property per keyframe and set its value:

Opacity, Translate X/Y, Scale, Rotate, Skew X/Y

Duration & Delay Slider + text input + ▲▼ arrows for precise control. Values are in seconds.

Easing 5 standard easings for free. 20+ curves on Pro — Spring, Bounce, Elastic, Expo, and more.

Iterations, Direction & Fill Mode Control how many times the animation plays, which direction, and what state the element holds before and after.

Trigger

On Load — plays immediately on Load. Best for hero sections.
In View — fires once when the element scrolls into the viewport using IntersectionObserver. Best for below-the-fold content.

Presets Tab

Ready-made animation templates organized by category. Click any free preset to load it into the Editor instantly. Pro presets are locked without a license.

Free: Fade In, Slide Up, Scale In.

Pro: Slide Down, Slide Left, Slide Right, Bounce In, Rotate In, Pulse, Shake, Float, Fade Out, Zoom Out, Spin, and more

Code Tab

Generates a Framer Code Override — a .tsx file that wraps any component with CSS animation logic.

Copy Override — copies code to the clipboard
Create Override File — injects it directly into Framer's code panel in one click

The override uses display: contents on its wrapper so Framer's stacks and layout remain completely unaffected. For In View animations, IntersectionObserver handles the trigger — plays once, then cleans up automatically.

Free vs Pro

Free includes:

Full keyframe editor and live preview
Up to 3 keyframes
5 easings, 3 presets

Pro adds:

Unlimited keyframes
20+ easings and 15+ presets
Copy code and create override files in Framer
All future updates — one-time lifetime purchase

53:[["$","$L56",null,{"post":{"id":"019d63ff-667d-783e-842e-988707c7317e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"993","resolved":true,"title":"Animsequencer","body":"$57","bodyJson":null,"introduction":"CSS Keyframe Animations","slug":"animsequencer","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/993-QvLaBT8F8rx5VaI7km19gtiSx81mXl","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/993-jHQPxX8HKQrxGJuHsOJGqn77lXovBY","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-04T22:24:55.151Z","updatedAt":"2026-04-04T22:28:07.090Z","publishedAt":"2026-04-06T18:12:55.549Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"16q2scp9fpjc0daki3tag2ckg","paid":true,"categories":[{"id":"676f63da-b192-4974-930d-73185802088a","name":"Media","slug":"media"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-06T18:12:55.549Z","updatedAt":"2026-04-06T18:12:55.549Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you