Framer University

This is a Framer recreation of the image grid reveal effect from Fabio Nobile's website. Feel free to copy this component to your Framer project and add this fun reveal effect to any image on your website.

This is a code override for Framer that you can use to switch between a component's variants as you scroll, thus displaying an animation. Check out how you can use it below.

This is a Framer recreation of the scroll animation originally seen on the Grow Studio website template. Feel free to remix the project and see how such an effect is built in Framer, without writing a single line of code.

This is a Framer recreation of the arrow button concept, originally created by Oğuz. Feel free to copy it to your project and start experimenting.

This is a Framer recreation of the navigation hover concept shared by Benten. Feel free to remix the project to see how this kind of navigation can be accomplished on your website, without any code, using Framer.

This is the scroll animation from the Superlink website, created in Framer. Feel free to remix it and see how these scroll animations can be achieved without writing any code.

This is a bookshelf gallery component that I made in Framer, inspired by David Mraz. Feel free to copy it into your project and start using it on your Framer website.

This is a Framer recreation of the Rabbit R1. No, it isn't an image. This illustration was made in Framer using frames. Feel free to copy the component into your project and have some fun with it.

Here's a recreation of the gradient border button from the official Framer website. Feel free to copy and paste it into your Framer projects and start using it on your site.

This is a waitlist button with an animated social proof tooltip, created in Framer without any code. Feel free to copy and paste this component into your project and use it on your site.

This is the Framer recreation of this scroll animation that was posted by Emmanuel to Twitter as a Figma prototype. I managed to recreate the scroll animation in Framer without any code. Feel free to remix the project and see how it's built.

This is a Framer recreation of the scroll animation originally seen on the UltrahumanX website. Feel free to remix the project and delve into how the scroll transformations work. No code was used in this project.

This is a Framer remake of the Magic Switch, originally created by Wei-Ee. The funny part? This switch actually works on a website and unbelievably, it can be done without any coding, thanks to Framer.

This is a TimeAgo component for Framer, which calculates the elapsed time from a specified date and time. Simply copy, paste it into your project, and start using it. Plus, it's super easy to customize through component properties.

This is a component you can pop on top of elements to get that glass effect on your Framer site. No code writing necessary - just copy and paste it into your project.

This is the scroll animation from the Apple Vision Pro site, recreated in Framer. Feel free to remix the project and check out how it's built.

This is the retweet animation, originally created by Kai in Rive, but recreated in Framer. Just copy and paste it into your project, and start using it on your website.

This is a recreation of the macOS dock animation from the screen.studio website, built in Framer without any code. Feel free to copy-paste it into your project and have fun experimenting with it.

This resource by Emili features buttons packed with captivating 3D elements, made in Spline, alongside new 3D Framer Expert badges. Feel free to copy, paste it into your project, and have fun playing around with them.

This is a replication of the laptop closing animation from the Frame.io website, made in Framer. Feel free to remix the project and explore how you can achieve this effect.

This is a recreation of the sticky scrolling Vucko section in Framer, originally created by Gil Huybrecht and Jesper Landberg. Feel free to remix the project and see how this effect can be achieved without any code.

This is an interactive particle component (made by Benjamin) for Framer, crafted using TSParticles. Feel free to clone it to your project and tweak it to fit using component properties.

This is a Framer demo project by Floris Verloop. It shows how to: set up an animated segmented control, combine it with other components using events, and create an auto-playing gallery.

This is an authentication animation loop, originally designed by Brad Cornes. It was recreated in Farmer without using any code. Feel free to remix the project and have fun playing around with it.

This is a text animation component by Ben and Adam. You can use it to animate text on your Framer website with custom settings.

These UI element animations, originally created by Chris, have now been recreated without any code using Framer. Feel free to remix the project and see how easy it is to set up looping animations like these in Framer.

This is the Framer logo animation, originally crafted by Jurre, which I've recreated in a quick tutorial. Check out the video lesson and learn to animate logos in Framer in just a few minutes, without any coding.

This is the Fey site, recreated in Framer without writing a single line of code. Feel free to remix the project and check out how it's built.

I saw some Lego toggles by Nicolas, and it inspired me to create customizable compact Lego web elements in Framer. They're designed to be easily copied and pasted into your website.

This is an Easter egg idea from the one and only Traf Master, made into a component in Framer. The component lets you set a specific word that, when typed anywhere on the site, triggers a redirect to a specific URL.

This is a skeuomorphic button concept by Muaaz, which I've recreated in Framer as an easily customizable component. Feel free to copy & paste it into your Framer project, and start using it right away.

This is the Superorganism site, recreated in Framer without writing a single line of code. Feel free to remix the project and check out how it's built.

Here's a really fun button hover animation by Outpost Design, recreated as a customizable Framer component - no code needed. Go ahead, copy the component to your website, spruce it up to your liking, and start using it.

This is the Avara site, recreated in Framer without writing a single line of code. Feel free to remix the project and check out how it's built.

I saw this tweet by Nicolas and immediately knew I had to create a Framer version of these Teenage Engineering buttons. Feel free to remix this project and play around with the components.

This is an interactive 3D globe code component for Framer, created by the awesome Benjamin. This spectacular component lets you jazz up your website. The best part? You can just simply copy and paste it into your project.

This is a demo project showcasing the new "Page Transition" effect in Framer. Framer is the first tool where you can experiment with this effect just by clicking a few buttons. It's truly amazing!

This is a compact dropdown menu component for Framer that you can easily copy and paste into your navbar.

This button originally seen on the Wiza website, is now available as a Framer component. Feel free to grab it for your project and tweak it based on the instructions below.

I saw an amazing button design on the Gitness website and just had to recreate it using pure Framer. This customizable component is a recreation of that button. Feel free to copy and paste it into your project and customize it through the component properties.

This is the 'Features' section taken from the Amie website and recreated in Framer. Feel free to remix the project to understand its structure, or just copy and paste it onto your own website.

This is a 3D button concept by Nick Kutsenko, recreated as a customizable Framer component. Feel free to copy it into your Framer project and showcase it on your very own website to add a fun touch.

This is an interactive 3D website in Framer, built with the help of Spline. Feel free to remix the project and see how it's put together.

This is a button hover interaction created in Framer, based on a concept by Andy Hooke. You can delve into the component to see how it's strcutured, or simply copy and paste it into your project.

This is an image gallery designed by Nicolas Marx, recreated as a fully customizable Framer component. You can easily copy and paste it into your website.

This is a blur gradient component for Framer that you can just easily drag and drop onto your canvas. Place it over any element to add a progressive blur effect to it.

This is a demo website that shows how you should structure your Framer site if you want to implement a horizontal scrolling section. Feel free to remix the project and dive deep.

This is the free version of Iconists' Central Icon System, now on Framer as a small, easy-to-use component. It includes 49 icons, but the complete icon set (available as a Figma file) comes with over 922+ symbols. Feel free to copy this component and paste it into your website to start using these beautiful icons.

This is a card hover interaction by Dave, recreated as a Framer component. Feel free to copy and paste it to your website and customize it through component properties.

This is a fluid switch component for Framer, originally designed by Liam Forsyth. Feel free to copy and paste it into your project and display it on your website.

This is a futuristic button component for Framer, inspired by this design. Feel free to copy the component and paste it onto your website.

This is a scribble code component for Framer, originally created by Gabriele Sabatino. All I did was adjust the code to prevent optimization issues when published on the Framer site.

This is a compact email button, initially spotted on the New Computer website, recreated in Framer. All you need to do is copy and paste it into your website, tailor it using the instructions below, and you're all set.

This is my submission for the 2023 Halloween Framer contest. Feel free to remix the project and see how it's built.

This is an unofficial rebuild of the WordPress website, done in Framer. I didn't write a single line of code when creating this website, and it took me only 2 hours. This speed and accuracy show the power of no-code tools, especially Framer's.

This is a rating interaction for Framer using multiple components and variants. Feel free to copy and paste this component into your website to add a fun little touch to it.

This is the winning scroll animation from the 20th Framer challenge, created by Thaer Swailem. Feel free to remix the project and check out how it's built.

This is a demo website showing you how to create a scroll progress bar in Framer that reflects your position on the page. Feel free to remix the file, copy the progress bar into your own site, and follow the set-up instructions listed below.

This is a demo website that shows you how to achieve the popular fixed footer on your Framer website. This type of footer can be seen on many websites, like Off Grid's, which is also built on Framer.

This is a physics component for Framer, created by Mike Wilson. You can simply copy the component and paste it into your website to add physics to certain elements.

This is a profile component for Framer, which you can use to show if you're currently available for freelance work. Feel free to copy the component and paste it into your project.

This is a component from Raz Rashid that displays a specific image when you hover over it. You can layer this component above any element to reveal an image when you hover.

This is a demo file and website showcasing the differences between fixed and relative overlays in Framer. You should remix this project to see how much time relative overlays can save you when you're crafting popovers.

This is a pretty cool button component taken from the Arturia website, recreated in Framer. If you're looking for a cool interaction, just copy and paste this component into your Framer project.

This is a code override you can use to create a custom "circle" cursor for your Framer website. This effect was inspired by the amazing website of Eythan D'Amico.

This is a smooth page-loading transition for Framer, inspired by the GraphicHunters website. Feel free to copy the component, paste it into your project, and tailor it to your needs. It's pretty impressive what you can achieve with Framer.

This is a cool dropdown concept by Oleg Frolov, implemented in Framer, with no code needed. Feel free to use this on your website if you'd like to add a unique touch to your dropdowns.

I challenged myself to recreate this carousel by Hüseyin, in Framer. He originally made it for the new Klarna app page. Interestingly enough, I did this without any code, video components, or pre-made Lottie or Rive files. There were many subtle effects that I aimed to replicate.

This is a website entry effect that you can use on your Framer website. Take a look at how it's constructed by remixing the project.

This is a recreation of the wild horizontal scrolling effect from the Think Dance website, but in Framer. The demo is a bit crazy, but it clearly demonstrates how to set up a horizontal scrolling section on your Framer website.

This is a swipe button interaction inspired by a marketing animation from Jitter, created in Framer. Feel free to remix the project, check out how it's built, or copy the component directly to your project.

This is a little demo file in Framer, showing you how easy it is to customize the easing options for animations and interactions within a Framer project. Go ahead, remix it and explore the transition settings.

This is a lovely star button component, originally designed by @dillionverma, now recreated as a no-code component in Framer. This project showcases how you can craft stunning button interactions by nesting multiple components within one another.

This is a demo file that shows you how to create a component that plays sound when you click the element. We achieve all this in Framer without writing a single line of code

This is a beautifully shiny skeuomorphic button, originally designed by Verse and recreated as a Framer component. This project serves as a perfect example of how we can combine overrides and component variants in Framer to achieve creative effects.

This is a recreation of the fantastic parallax scroll effect from the Chainzoku website, using Framer. It's a cool project that seriously highlights how easy it is to manipulate scroll speeds in Framer.

This is a recreation of the advanced scroll zoom animation from the Vrtlwrld website in Framer. By remixing this project you'll learn how sticky positioning works and how to get the most out of Framer to achieve advanced animations.

This is an awesome code component by Benjamin for Framer. It takes your SVGs and animates them in such a way that your visitors will be like, "wow".

This is a code component for creating a text color animation in Framer. This effect looks stunning on all websites and could be a fantastic addition to yours too. However, make sure not to overdo it.

This is a recreation of the fantastic zoom scroll effect from Natascha Vavrina's website, using Framer. It's a cool project that really shows off Framer's endless capabilities.

This is a recreation of the tilted scrolling effect from the fantastic website of Andreas Antonsson, using Framer. It's a perfect project to show what you can accomplish when you use scroll transforms in a clever way.

This is a rebuild of the Framer editor interface, in Framer itself. That's right—you heard me correctly. I literally built the Framer UI using Framer, and you can check it out online.

This is a dropdown design, originally created by UI8, that has been recreated as a Framer component. Feel free to remix the project to understand how it's built, or simply copy and paste it into your own projects.

This is a code override and component for Framer. It lets you add these sleek dotted backgrounds for your navbars, or nearly any element. Originally created by Rizal. Check out his instructions on how to use it here.

This is an unofficial recreation of the sick bento effect from the Apple Siri website. This project really rocks, showing off Framer's unique knack for crafting high-quality websites, no coding required.

This is a text magnifier code component. It can make any text magnify when you hover over it. It could be a really fun addition to your Framer website.

This is a demo for a modal interaction, created in Framer. Whenever you're looking to create a modal, this can serve as a great starting point. You're welcome to return to this anytime you need it.

This is an unofficial recreation of a segment from the Apple Watch Series 9's website. It's an awesome project that showcases Framer's exceptional ability to create top-notch websites, all without writing a single line of code.

This is an unofficial rebuild of a section from the new iPhone 15 Pro's website. It's a really fantastic project that showcases Framer's capacity to build top-tier websites.

This is a text flip effect, inspired by a button on the Chronicle website. Making this effect in Framer was pretty challenging, and I had to employ a few workarounds to achieve the desired results.

This is a bouncy button component, an original creation by Rauno, but recreated in Framer. It's a super fun micro-interaction that can bring a dash of life and fun to your icon buttons.

This is a "sweep light" hover effect, first seen on the Vercel website, now recreated in Framer. Feel free to copy this component, paste it into your project, and use it on your own websites.

I've recreated the scroll mask effect from the famous 2authenticators website. I'm really proud of this one because it was so complex that I had to scratch my head for hours, all to recreate it using only native Framer features – no code involved! Luckily for you, I'm sharing the remix link. Totally free, of course.

I recreated the awesome zoom scroll effect you see on the Stryds website. It was really fun to recreate this in Framer, even though I had to come up with some creative solutions.

This is a remake of the galaxy button first showcased on the Genius website. It's a truly engaging effect that can certainly elevate your site to new heights.

This is a fun redo of afroman's electric tab trick. What happens is, when you switch tabs, this tiny marker transforms into a sizzling electric line. Pulling off this stunt in Framer wasn't a walk in the park, lol!

This is the famous magnetic hover interaction, first introduced by none other than Apple for their iPad operating system. Remix it and add it to your websites to make your visitors go "Wow!".

This is a re-do of the magnetic carousel Rauno made. It was quite a challenge to remake this in Framer, as it uses many components, variants, events, and interactions. Feel free to remix the project and experiment further with it.

This is a hero section with mountain parallax made in Framer. Believe it or not, it was created without writing any code at all. It just shows you how easy it can be to create cool effects in Framer.

This is a cyberpunk button component featuring a captivating animation inspired by UI8. Feel free to use it on your website to impress your visitors.

This is a code override for Framer that can be applied to a component to give it a 3D card-like appearance that flips to reveal its back side upon clicking. Feel free to use it on your website for a unique touch.

I recreated the Apple Watch website in Framer, using very little code (almost none). Feel free to remix this project and see for yourself how capable Framer is. Explore how far you can go with this tool in terms of building complex animations and effects.

This is a button component that transforms into a glowing gradient button when hovered over. You can use this on your Framer websites to add a touch of playfulness.

This is a bouncy button interaction created with multiple components. You can copy and paste it into any of your projects and easily customize it via component properties.This is a bouncy button interaction created with multiple components. You can copy and paste it into any of your projects and easily customize it via component properties.

This demo shows a text reveal effect in Framer, an effect that was popularized by Apple. They frequently use this effect on their product marketing pages.

This demo perfectly demonstrates how to achieve gradient borders in Framer using a simple trick. The gradient border on this button is animated, and the line goes around the element, making it "pop".

This is a button component in Framer. When you hover over it, the text moves to the left and an arrow comes in from the right. You can use this component to make your buttons more playful.

This is a recreation of the amazing Stripe sessions carousel. It is a really good example that showcases how you can build complex interactions with multiple components and event variables.

This is a recreation of the fun book opening animation that you can see on the Vercel website. It serves as an excellent example of how to creatively utilize hover and loop effects in Framer to achieve unique animations.

This is a real-time clock widget (code component) for Framer. You can use this on any of your websites to display the current time for your visitors.

This is a 3D hover code override that you can apply to any element to achieve a pleasing 3D hover effect.

This is a photo gallery from the Giulia website, recreated in Framer. This design can be used to display images on your website in a fun, engaging manner, featuring timeline navigation on the right side.

This is a radar animation by Abduzeedo recreated in Framer. It's a fun little exploration that showcases Framer's capabilities. What's astonishing is, this isn't just a prototype; it's a live website with which users can interact.

This is a parallax carousel interaction made with multiple components and variants.

This is an interactive like button component in Framer. However, it's important to note that this was created just for the sake of creating a cool interaction, and it doesn't act as a real like button that genuinely counts likes.

This is an Apple keyboard interaction in Framer. The fascinating part is that the keyboard is not an image. Yes, everything you see is created by drawing rectangles and applying gradients, creating the appearance of an Apple keyboard.

This is a recreation of the cards animation seen on the Swag website. With this website demo, you'll gain insight into how sticky positioning and scroll transforms can be used together to achieve creative effects and animations like the one shown here.

This is a code override that you can apply to any text layer to achieve this text scramble effect on page load. Can be a nice little detail on your websites, however, make sure not to overuse it.

This is the simplest dropdown menu that you can possibly create in Framer. Extremely useful when you have multiple related options or just don't have enough space to show them right next to each other.

This is an easy overlay interaction that allows you to implement a checkout experience on your Framer website. Oh, and the best part is that this requires zero code, since we're embedding the Lemon Squeezy checkout page on our website.

Use this widget (code component) on your Framer website to add a customizable countdown element to it. This can be used for product launches, limited time offers, and more.

Infinitely looping text component for Framer. You can easily upgrade your Framer website’s hero section by adding this feature to achieve the trendy text cycling effect seen on many other websites.

This is a link preview component for Framer. You can use it to display a preview image of any given link. This way, users can get a glimpse of the website they're about to visit.

Check out this fun, little skeuomorphic toggle component I created in Framer. The craziest part? I didn't even need to write a single line of code to pull it off, and it took me roughly about 10 minutes. Framer is seriously goated.

This is a component that allows you to add a share button to your Framer websites. It can be used on individual blog posts or portfolio items.