50:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/05lj3a0qaa006.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/382a8k30zyobj.js","/creators-assets/_next/static/immutable/chunks/368p63l4oh_7-.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/228u8o-g1d1_g.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/413kuej600yyw.js","/creators-assets/_next/static/immutable/chunks/1v3f42-oqro9g.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/146b7x-3yl4nl.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js"],"S"] 51:T7e1,

30 Lottie Animations: customizable microinteractions for Framer

Add polished animated icons to your Framer site in seconds. This pack includes 30 ready-made Lottie animations for loaders, success and error states, notifications, gestures, security and more. Every one is controlled from Framer's Style panel, with no code and no Lottie files to find or upload.

Why choose this pack

Recolor in one click. Match any brand color or dark and light theme with the Icon Color control.
Adjust stroke width. Make icons thinner or bolder to fit your design. This works on the line-based animations.
Full playback control. Loop, autoplay, speed, play on hover, and reverse on mouse leave.
Nothing external to set up. All animation data is built in. Pick an animation from the dropdown and it works, with no JSON files or URLs.
Works in any Framer project. Drag the component in, choose an animation, adjust the controls.

What's included (30 animations) Loader, Upload, Download, Syncing, Refresh, Success, Error, Warning, Offline, Online, Empty Inbox, No Search Results, No Notifications, No Messages, Placeholder Content, Tap Indicator, Swipe Gesture, Drag Interaction, Pull to Refresh, Share, Notification Bell, Alert Badge, Achievement, Confetti Burst, Protected, Unlock, Fingerprint Scan, Face ID, Filter, Back Arrow.

Perfect for SaaS landing pages, web apps and dashboards, onboarding flows, empty states, form feedback, loading screens, portfolios and mobile-style UI prototypes.

How to use it

Install the component and drag it onto your canvas.
Choose an animation from the Animation dropdown.
Set color, stroke width and playback in the Style panel.

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-93a43c3a-5ef5-46aa-801c-38e55add9937-all:/unified/creator/93a43c3a-5ef5-46aa-801c-38e55add9937/activity/":[{"data":[{"id":"01a12f61-b4e1-737e-9dc4-a789c67f211a","type":"creator.followed","target":{"type":"creator","id":"09bc3e24-752b-4a1b-97c2-ab8d755f63b8","preview":"Tauhid Hasan","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/09bc3e24-752b-4a1b-97c2-ab8d755f63b8/4taurhlo","slug":"tauhiduiux","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"93a43c3a-5ef5-46aa-801c-38e55add9937","name":"Balazs Renata","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93a43c3a-5ef5-46aa-801c-38e55add9937/og5z5esa","slug":"balazs-renata","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-12T09:11:34.865Z","latestAt":"2026-10-12T09:11:34.865Z"},{"id":"01a12f61-722d-71a9-bddd-b13b42fd4b3e","type":"creator.followed","target":{"type":"creator","id":"830039ba-56b1-42fc-a371-361e8f7a1e4c","preview":"RedDevs","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/70334/avatar-q9VjO21hdl19yEZkkQj3EgY306N2Yq.jpg","slug":"reddevs","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"93a43c3a-5ef5-46aa-801c-38e55add9937","name":"Balazs Renata","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93a43c3a-5ef5-46aa-801c-38e55add9937/og5z5esa","slug":"balazs-renata","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-12T09:11:17.732Z","latestAt":"2026-10-12T09:11:17.732Z"},{"id":"01a12c25-1c8c-74f8-be86-5e2e4371cc46","type":"component.created","target":{"type":"component","id":"ZIhnGQZwQCnX8haBmRwI","preview":"30 Lottie Animations","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93a43c3a-5ef5-46aa-801c-38e55add9937/01a12c24-35fd-7671-b57a-cf4d516f7c13.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"93a43c3a-5ef5-46aa-801c-38e55add9937","name":"Balazs Renata","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93a43c3a-5ef5-46aa-801c-38e55add9937/og5z5esa","slug":"balazs-renata","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-11T18:06:32.076Z","latestAt":"2026-10-11T18:06:32.076Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:93a43c3a-5ef5-46aa-801c-38e55add9937:/unified/posts/?creator=93a43c3a-5ef5-46aa-801c-38e55add9937&with=reposts":[{"data":[{"id":"01a12c25-1a03-76b5-8a44-df90dde5bc23","title":null,"body":"

Just updated 30 Lottie Animations. Recolor any animation, adjust stroke width, and control hover, speed and loop right from the Style panel. No Lottie files or code needed.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just updated 30 Lottie Animations. Recolor any animation, adjust stroke width, and control hover, speed and loop right from the Style panel. No Lottie files or code needed."}]}]},"author":{"framerUserId":"93a43c3a-5ef5-46aa-801c-38e55add9937","name":"Balazs Renata","slug":"balazs-renata","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93a43c3a-5ef5-46aa-801c-38e55add9937/og5z5esa","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ZIhnGQZwQCnX8haBmRwI","resolved":true,"title":"30 Lottie Animations","body":"$51","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"30 Lottie Animations: customizable microinteractions for Framer","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Add polished animated icons to your Framer site in seconds. This pack includes 30 ready-made Lottie animations for loaders, success and error states, notifications, gestures, security and more. Every one is controlled from Framer's Style panel, with no code and no Lottie files to find or upload."}]},{"type":"paragraph","content":[{"type":"text","text":"Why choose this pack","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Recolor in one click.","marks":[{"type":"bold"}]},{"type":"text","text":" Match any brand color or dark and light theme with the Icon Color control."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust stroke width.","marks":[{"type":"bold"}]},{"type":"text","text":" Make icons thinner or bolder to fit your design. This works on the line-based animations."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full playback control.","marks":[{"type":"bold"}]},{"type":"text","text":" Loop, autoplay, speed, play on hover, and reverse on mouse leave."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Nothing external to set up.","marks":[{"type":"bold"}]},{"type":"text","text":" All animation data is built in. Pick an animation from the dropdown and it works, with no JSON files or URLs."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Works in any Framer project.","marks":[{"type":"bold"}]},{"type":"text","text":" Drag the component in, choose an animation, adjust the controls."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"What's included (30 animations)","marks":[{"type":"bold"}]},{"type":"text","text":" Loader, Upload, Download, Syncing, Refresh, Success, Error, Warning, Offline, Online, Empty Inbox, No Search Results, No Notifications, No Messages, Placeholder Content, Tap Indicator, Swipe Gesture, Drag Interaction, Pull to Refresh, Share, Notification Bell, Alert Badge, Achievement, Confetti Burst, Protected, Unlock, Fingerprint Scan, Face ID, Filter, Back Arrow."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for","marks":[{"type":"bold"}]},{"type":"text","text":" SaaS landing pages, web apps and dashboards, onboarding flows, empty states, form feedback, loading screens, portfolios and mobile-style UI prototypes."}]},{"type":"paragraph","content":[{"type":"text","text":"How to use it","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Install the component and drag it onto your canvas."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose an animation from the "},{"type":"text","text":"Animation","marks":[{"type":"bold"}]},{"type":"text","text":" dropdown."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set color, stroke width and playback in the Style panel."}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Animated Lottie Icons for Framer","slug":"30-lottie-animations","author":{"framerUserId":"93a43c3a-5ef5-46aa-801c-38e55add9937","name":"Balazs Renata","slug":"balazs-renata","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93a43c3a-5ef5-46aa-801c-38e55add9937/og5z5esa","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93a43c3a-5ef5-46aa-801c-38e55add9937/01a12c24-35fd-7671-b57a-cf4d516f7c13.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-11T18:06:30.740Z","updatedAt":"2026-10-12T11:42:28.378Z","publishedAt":"2026-10-11T18:06:30.736Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://lottie-microinteractions.framer.website","price":"9","paymentUrl":"https://balazsrenata.lemonsqueezy.com/checkout/buy/9aeb335b-3c11-478f-b01a-26570facfa5f","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"9b0qhkV7f72B2yuSpSrF","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-10-12T10:05:09.719Z","createdAt":"2026-10-11T18:06:31.427Z","updatedAt":"2026-10-12T10:05:09.719Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L52"}]