Framer popularity is skyrocketing. So if you want to master this tool, you for sure seek some inspiring resources, tips & guides. Plenty of them are around the web, and the community is constantly sharing new ones. That's why I'd like to curate from time to time the ones that deserve more attention.

Grab the mug of your favorite coffee, and let's discover the first collection of Framer resources:

‍

Tutorials:

‍

1. Shimmer effect

Jurre Houtkamp (@jurrehoutkamp) shared a guide on how to add an impressive looping shimmer effect to your framer elements:

‍

‍

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. Here is how Nabeel Jawahir (@itsnotnabeel) made it to work:

‍

‍

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):

‍

‍

4. Play video on hover

The simple way to automate playing video preview while hovering the element by Matteo (@matteotiscia):

‍

‍

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 :

‍

‍

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):

‍

‍

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):

‍

‍

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:

‍

‍

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):

‍

‍

10. Spring button animation

Dynamic button transition activated on hover by Framer Club (@framerclub):

‍

‍

11. Galaxy button

The interaction that takes your users to the moon! Made by Framer University (@learnframer):

‍

‍

‍

Pro Tips:

‍

1. Smooth accordion expansion & collapse

If you tried to make animated accordions in Framer, you might notice that the transition is not always smooth. Matteo (@matteotiscia) figured out the way that solves the issue, so your animation will always amaze:

‍

‍

2. Z-index - what's that, and why is it so useful for Framer sites?

Clara (@TheIndLang) shared a brief but comprehensive guide on how to use Z-index with Framer. Definitely must-know for all no-coders:

‍

‍

‍

‍

‍

Projects to remix:

Radar

If you have ever wondered how to create spinning radar animation, you may discover it on your own by remixing this project by Framer University (@learnframer):

‍

‍

Mega menu navigation

Dropdowns within the navigation bar are a very popular pattern used to hide website complexity. With this project, you will get a sample of how to prepare it in Framer (Note: it includes paid remix link):

‍

‍

Card with reflection on hover

This impressive card element was made by Framer University (@learnframer). Remix it and learn how to achieve it on your site:

‍

‍

Stacked page sections

Nabeel Jawahir(@itsnotnabeel) prepared the impressive effect achieved with a simple technique (setting section position to "sticky"). Check it out:

‍

‍

3D card flip

The amazing effect was created by Joshua Guo (@JoshGuoSpace). It requires code override but... will definitely add some spice to your site.

‍

‍

Mega menu #2

Another elegant mega menu concept was done in Framer by Filip Gadziński (@gadzinski_). This time 100% free resource to remix:

https://megamenu.framer.website

‍

‍

‍

Hover highlight effect

The effect that highlights the card and follows the cursor smoothly by Dan Hollick (@DanHollick):
‍

‍
‍

3D Dropdown

The component itself looks amazing. Try to expand and see the magic. Made by traf (@traf):

Glassmorphic sphere

I also allowed myself to prepare glass bubble effect - made only with frames, no vectors or bitmaps:
‍

‍

‍

Summing up

That's it for now! I hope you got some useful knowledge and inspiration to dive deeper into the no-code world with Framer.

Don't forget to subscribe to the newsletter for fresh Framer content (more coming soon!).

Oh, by the way, I also made a few Framer templates. You may check them out here if you seek for portfolio template or would like to discover some fresh components.

‍

‍