Animated Hue Cards in Framer | Step-by-Step No-code Tutorial

Live demo: animatedcards.framer.website/
Remix this project: framer.com/projects/new?dupli...
In this video, we'll guide you through the process of creating a animated Hue Cards using Framer. 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:30 Creating the Bottom Section of the Card
04:42 Creating the Top Section of the Card
06:55 Adding the Animated Top Section
10:18 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!

[@JesseMoffett]

Very cool! Thanks

[@tonjrv]

Glad you liked it Jesse! 🙌

[@RickHills]

hey, your gradients suddenly are supper laggy and the website also started lagging like crazy. Do you know when the problem is going to be fixed? Worked fine yesterday :/

[@tonjrv]

Hi mate! Thanks for letting me know. I just checked and they seem to be working well for me. Let me know if you still have the issue, and I'll try to figure it out ✌️

[@saurishlahiri5848]

Copy paste to framer is not working :(

[@tonjrv]

Hmm sounds bad. I just tried it and worked for me at least now. Perhaps try again and let me know how it goes. 🙌

[@sujayshetty4858]

my shader gradient doesnt animate

[@tonjrv]

Hi there! Have you checked that Animate is set to be: On. This can be found under the Shape settings in component. Let me know if this helped. 🫡

[@axr4305]

@@tonjrv I have the same Issue. The Copied Component from the Remix just doesnt work at my other website.
Its Basicly just empty.

[@tonjrv]

Thanks for letting me know! I just tried to copypaste it from the remix file to new file and it seems to be working for me.
Perhaps you could try to download the component directly from: www.shadergradient.co
Let me know if that helps! ✌️