Friday with @framer. ✨ Recently I realized that I bookmarked dozens of inspiring Framer resources & tutorials. Let me share them with you folks in this MEGA thread! 🧵
#framer #nocode #uidesign
#framer #nocode #uidesign
1. Shimmer effect
Jurre Houtkamp (@jurrehoutkamp) shared a guide on how to add an impressive looping shimmer effect to your framer elements:
Jurre Houtkamp (@jurrehoutkamp) shared a guide on how to add an impressive looping shimmer effect to your framer elements:
https://twitter.com/jurrehoutkamp/status/1630213441901264903
2. Adding effects with code without coding knowledge
This is one of the most interesting tutorials I've noticed recently. You do not have to learn to program to override code in Framer. Simply guide chatGPT to help you. By Nabeel Jawahir (@itsnotnabeel)
This is one of the most interesting tutorials I've noticed recently. You do not have to learn to program to override code in Framer. Simply guide chatGPT to help you. By Nabeel Jawahir (@itsnotnabeel)
https://twitter.com/itsnotnabeel/status/1630547930896637953
3. Scrolling effect - from the full view to disappear
A really cool effect that may be used on various landing pages created by Joshua Guo (@JoshGuoSpace):
A really cool effect that may be used on various landing pages created by Joshua Guo (@JoshGuoSpace):
https://twitter.com/JoshGuoSpace/status/1631315748072169475
4. Play video on hover
The simple way to automate playing video preview while hovering the element by Matteo (@matteotiscia):
The simple way to automate playing video preview while hovering the element by Matteo (@matteotiscia):
https://twitter.com/matteotiscia/status/1630913875351674881
5. Include interactive 3d elements on your site
Monika Michalczyk (@monmichalczyk) prepared a very handy tutorial describing a simple way to integrate Spline with your Framer site :
Monika Michalczyk (@monmichalczyk) prepared a very handy tutorial describing a simple way to integrate Spline with your Framer site :
https://twitter.com/monmichalczyk/status/1630881851068801024
6. Elegant segmented control
From this tutorial, you will learn how to create segmented control with events that will trigger an action on other elements. Made by Floris Verloop(@fverloop)
From this tutorial, you will learn how to create segmented control with events that will trigger an action on other elements. Made by Floris Verloop(@fverloop)
https://twitter.com/fverloop/status/1630612117744238605
7. Confetti button
Trigger dynamic and effective animation when the user presses the button. This effect was achieved with code override, but you may achieve a similar effect with Lottie animation. Tutorial by Clara (@TheIndLang)
Trigger dynamic and effective animation when the user presses the button. This effect was achieved with code override, but you may achieve a similar effect with Lottie animation. Tutorial by Clara (@TheIndLang)
https://twitter.com/TheIndLang/status/1630266592553746432
8. Horizontal Scroll Section
Sections & cards scrolled horizontally help to break the scrolling routine and strengthen user focus on specific content. Aleks (@aleksliving) shows how to achieve that effect with Framer without any line of code:
Sections & cards scrolled horizontally help to break the scrolling routine and strengthen user focus on specific content. Aleks (@aleksliving) shows how to achieve that effect with Framer without any line of code:
https://twitter.com/aleksliving/status/1625253872574038016
9. Glowy gradient button
Wanna catch more attention with a delightful CTA? This kind of button will for sure drive a lot of attention.
Made by Framer University (@learnframer)
Wanna catch more attention with a delightful CTA? This kind of button will for sure drive a lot of attention.
Made by Framer University (@learnframer)
https://twitter.com/learnframer/status/1630840514705788929
10. Spring button animation
Dynamic button transition activated on hover by Framer Club (@framerclub):
Dynamic button transition activated on hover by Framer Club (@framerclub):
https://twitter.com/framerclub/status/1630947994488143877
You may also find 10 more @framer tips & resources on my blog: thalion.pro/post/framer-20…
That's it for now! Don't forget to hit follow button (@thalion_pb)
That's it for now! Don't forget to hit follow button (@thalion_pb)
• • •
Missing some Tweet in this thread? You can try to
force a refresh
