Card Animation in Framer with Scroll Variants | No-Code Tutorial

Live demo: cardtutorial.framer.website/
Remix this project: framer.com/projects/new?dupli...
In this video, we'll guide you through the process of interactive animated info cards in Framer. We will use Scroll Variants and Scroll Sections to achieve the effect. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your website.
Chapters:
00:00 Preview
00:40 Creating the base card
05:04 Animated Card with Bar Chart
07:55 Animated Security Card
10:09 Animated Numbers Card
13:04 Animated Stars Card
15:10 Setting Up Scroll Variant Animations
17:35 Making it Responsive
20:05 Final
Don't forget to like the video if you find it helpful and subscribe to our channel for more Framer tutorials and design inspiration.
_________________________________________________________
Find me on other channels:
Twitter/X: / tonjrv
Instagram: / tonjrv
Threads: www.threads.net/@tonjrv
________________________________________________________
Create your free Framer account: www.framer.com/?via=tonjrv
_________________________________________________________
If you have any questions or suggestions, please leave them in the comments section below. Let's dive into the world of interactive design with Framer!

[@eba-rave7509]

I'm so happy that I finally found what I was looking for! Thank you so much, Toni, for the great value you share with us!

[@tonjrv]

Awesome to hear that and no worries at all! 🔥
Let me know if you have any questions!

[@houze.9490]

I was looking for such a long time for a tutorial like this. Amazing job my friend, good tutorial to follow and happy with the result. Keep up the food work :) (Subscribed to the channel, btw)

[@tonjrv]

Awesome to hear that! I'll keep the videos coming🔥🔥

[@bwolson]

Such a good tutorial. Connecting the individual components scroll variants is totally a step you can miss and go down a rabbit hole 😅

[@tonjrv]

Thanks mate! And that's totally the key in here 😅

[@AndreFelipeF]

great job!!

[@tonjrv]

Thanks Andre!! 🔥

[@k40L1n]

Bro this si so useful!!😊

[@tonjrv]

Thanks bro! Love to hear that! 🔥

[@edenjames7378]

Thank You Man ....

[@tonjrv]

No worries! I hope it's helpful for you! 🙌

[@maurolima4274]

MY GOD!!! This guy is not from this planet!!!
How absurd is this!!!

[@tonjrv]

Thanks mate! 🔥🔥

[@eba-rave7509]

I totally agree!

[@NikhilsRavi]

💥💥

[@tonjrv]

🫡🫡🫡

[@Contactbps]

I also would love to know how to extract PNG sequence of these Fader animation in one go

[@tonjrv]

Hi mate, sorry I had missed your comment. Unfortunately I'm not sure how to do that.