Guide
- Component
- Screen saver
Guide
- Component
- Screen saver
Guide
- Component
- Screen saver
How to Add a Screen Saver to Your Website
Learn how to create an interactive DVD screen saver style animation in Framer without writing a single line of code. I'll show you how to set up the Screen Saver component from Framer University, customize its appearance, and integrate it seamlessly into your website. You'll discover how to adjust positioning, handle z-index conflicts, and fine-tune the animation's behavior.
Posted by
Nandi
Table of contents
If you've ever seen the iconic DVD screensaver bouncing around, you know exactly how cool and it can be to watch. So I created a screen saver component, and I want to show you how to add it to your Framer project.
Let’s dive right in. :)
Step 1: Remix the project or copy component
So you can either remix the Framer project.
Or click the "Copy component" button then paste it into your Framer project. To keep it fixed and visible while scrolling, set the component's position to fixed and set all four pins (top, bottom, left, right) to zero. This ensures it covers the entire screen and stays in place as you scroll.
Step 2: Adjusting z-Index for visibility
You’ll notice the screen saver might get hidden behind other elements like the navigation bar. To fix this, we need to adjust the Z-index property. Set the Z-index to 10 to bring the screen saver in front of other elements (and also make sure there are no elements on the website with higher Z-index than this).
If you've ever seen the iconic DVD screensaver bouncing around, you know exactly how cool and it can be to watch. So I created a screen saver component, and I want to show you how to add it to your Framer project.
Let’s dive right in. :)
Step 1: Remix the project or copy component
So you can either remix the Framer project.
Or click the "Copy component" button then paste it into your Framer project. To keep it fixed and visible while scrolling, set the component's position to fixed and set all four pins (top, bottom, left, right) to zero. This ensures it covers the entire screen and stays in place as you scroll.
Step 2: Adjusting z-Index for visibility
You’ll notice the screen saver might get hidden behind other elements like the navigation bar. To fix this, we need to adjust the Z-index property. Set the Z-index to 10 to bring the screen saver in front of other elements (and also make sure there are no elements on the website with higher Z-index than this).
If you've ever seen the iconic DVD screensaver bouncing around, you know exactly how cool and it can be to watch. So I created a screen saver component, and I want to show you how to add it to your Framer project.
Let’s dive right in. :)
Step 1: Remix the project or copy component
So you can either remix the Framer project.
Or click the "Copy component" button then paste it into your Framer project. To keep it fixed and visible while scrolling, set the component's position to fixed and set all four pins (top, bottom, left, right) to zero. This ensures it covers the entire screen and stays in place as you scroll.
Step 2: Adjusting z-Index for visibility
You’ll notice the screen saver might get hidden behind other elements like the navigation bar. To fix this, we need to adjust the Z-index property. Set the Z-index to 10 to bring the screen saver in front of other elements (and also make sure there are no elements on the website with higher Z-index than this).
Necessary settings on the screen saver component.
Necessary settings on the screen saver component.
Necessary settings on the screen saver component.
Step 3: Connecting background and bouncer elements
The next step is to connect a background element and a bouncer that will start bouncing around when the screen saver appears. You can simply grab the connector on the right side of the component and connect it to any frame that's not part of any breakpoints.
Step 3: Connecting background and bouncer elements
The next step is to connect a background element and a bouncer that will start bouncing around when the screen saver appears. You can simply grab the connector on the right side of the component and connect it to any frame that's not part of any breakpoints.
Step 3: Connecting background and bouncer elements
The next step is to connect a background element and a bouncer that will start bouncing around when the screen saver appears. You can simply grab the connector on the right side of the component and connect it to any frame that's not part of any breakpoints.
Connecting the background to the screen saver.
Connecting the background to the screen saver.
Connecting the background to the screen saver.
Step 4: Adjusting the idle time
You can finish the setup process by taking a glance at the component properties on the right panel. You can change the idle time here, the speed of the bouncer, or the transition that'll be used for the appear and disappear animation of the screen saver.
Quick tip: set the idle for 10< seconds to make sure it's not distracting readers.
Step 4: Adjusting the idle time
You can finish the setup process by taking a glance at the component properties on the right panel. You can change the idle time here, the speed of the bouncer, or the transition that'll be used for the appear and disappear animation of the screen saver.
Quick tip: set the idle for 10< seconds to make sure it's not distracting readers.
Step 4: Adjusting the idle time
You can finish the setup process by taking a glance at the component properties on the right panel. You can change the idle time here, the speed of the bouncer, or the transition that'll be used for the appear and disappear animation of the screen saver.
Quick tip: set the idle for 10< seconds to make sure it's not distracting readers.
Component properties of the screen saver.
Component properties of the screen saver.
Component properties of the screen saver.
Final touches
Finally, test your screen saver by waiting for the idle time to pass. You should see your background element fill the screen and your bouncer bouncing around. With the right settings, it will be a fun, engaging addition to your website!
And that’s it! You've created a unique, interactive screen saver for your Framer website — without writing a single line of code.
Final touches
Finally, test your screen saver by waiting for the idle time to pass. You should see your background element fill the screen and your bouncer bouncing around. With the right settings, it will be a fun, engaging addition to your website!
And that’s it! You've created a unique, interactive screen saver for your Framer website — without writing a single line of code.
Final touches
Finally, test your screen saver by waiting for the idle time to pass. You should see your background element fill the screen and your bouncer bouncing around. With the right settings, it will be a fun, engaging addition to your website!
And that’s it! You've created a unique, interactive screen saver for your Framer website — without writing a single line of code.
