Amazing Cursor Follow Animations in Figma! 😲 - Figma + Spline | Design Weekly
Вставка
- Опубліковано 27 лип 2024
- Today we're creating these amazing cursor following animations animations in Figma using our favorite 3D tool Spline!
Figma screens: www.figma.com/file/YxqCQfrD30...
Video chapters
0:00 Introduction
1:02 Circle Follows Cursor
5:35 Quicksand Mouse Effect
Get the equipment I use:
1. Mic: amzn.to/3b2OQa5
2. Camera: amzn.to/3rJzPj6
3. Macbook Pro: amzn.to/3aYeD30
4. Asus Gaming Laptop: amzn.to/2Mj4cN7
5. Pop filter: amzn.to/3aYfReC
For Sponsorship: punitwebdeveloper@gmail.com
Follow Me on Twitter:
/ punitweb
Follow me on Medium:
/ punitweb
My Behance Profile:
www.behance.net/punitweb
#uidesign #figma #prototype - Навчання та стиль
Punit!!! Please do more of these!!! You have saved our lives with this!!!!
great! i always wondered how is this done..would love to see more such videos!!
Always good things to learn with you ! Big love bro. Keep going
Hatsss Off To you.... Punit.... I am a multimedia designer and switching myself to UI/UX... and your videos are really helping me to reach to the advance level.... they way you explain is very very clear..... great video
Thankyou sir for this amazing tutorial 🥰😋 . I never knew we can create magic using spline and figma
Great as always
Amazing tut! ❤️
Thank you so much for sharing ❤️❤️
thank you for this tutorial thats amazing
Really cool!
This is a great tutorial!🚀🚀
Super technique! Thanks.
Thank you so much!
Omg thank you so much
Great tutorial
wow amazing
Hmm interesting, need to try this :)
Hi there, are there any additional settings or do you use the defaults in Spline? I did the things you show before you hit play the first time and when I play the animation the circle doesn't follow the cursor but rotates around itself.
We miss those one on one sessions 🤗
my friend! top top top video
Thank you very much!!
Happy to help! :D
punit when you show something can you tell us how can that be useful too/
how d oyoou make it work only on a specific area?
Could u embed those in webflow too?
how to use this on your website? like whats the use-case for this method...
Can we choose our own revealing colour instead of blue(difference )?
but do the buttons and other interactive elements stay active? since the cursor is only triggering the top layer?
Nice video punit. You keep doing preview on anima, my question is can’t the effect be previewed on figma?
Same query here
thank you very much for the informative tutorial, but I do have a question: using the circle follow effect, how can I see a different frame thorugh the circle? I.E: a secret service frame under a fake front frame which can only be seen through the circle that follows the cursor
yes @punit even i would like to learn that
Amazing video sir... ✨✨ One question can we use the code for our websites as well. I mean can we use the embedded code when we code the website ?
tried it with framer motion, complete pain in the ass ended up quitting 2 days in. If you wanna have anything close to production ready , we have to buy anima as well as spline. Then you gcan proboble just copy paste the component from anima.
😍
Can this be shown in the prototype? when I present it I can't see the animation :(
No, only in a browser unfortunately. You can see how he clicks to preview in a browser
I've followed the steps correctly but my animation is not working. Is there some other setting that I'm missing? Please someone help me with this.
same error
Please how can I transfer it to my figma work when I am done ☑️
Install the anima plugin in figma ☺️
I do all the same but nothing happened in Figma(((((((((((((((((
Hey your videos is so loading now can't watching this video but I'm follower of you. Before videos clearly watched not like present videos loading
I think Vectary 3D is much better than Spline.
Kinda pointless for anything other than show. Even handing this off to dev won't save them any time given it would need to be properly coded to work in browser.