Setting up scroll effects
Last updated
Last updated
To really make your page look and feel fresh, you’ll want to add scroll effects like parallax scrolling or animations that are based on scroll triggers. Even though both are based on scrolling, they work pretty differently so we’ll detail them below.
Scroll Trigger works a lot like Click / Tap in that it is triggering things based on the interaction. Scroll works the same for all devices so there’s no need to set it up differently.
In this example, we want to have a section animate up into palace while fading in. This is a great way to have things build and gently reveal themselves as a user scrolls through the page.
When you add a Scroll Trigger there are some unique options you have to keep in mind.
The first being “Trigger when seen” which allows you to control roughly when you want the trigger to happen. For instance, when the slider is set to 0 (px) it will trigger the action the moment it is seen on the screen. If you have a quick animation, this might get lost and not easily seen by the user. A good idea is to set when it is seen to 100 - 200px after it first enters the view to be sure users don’t miss anything.
The second option is the “Play only once” or “Reset trigger on hide” toggle. This is purely up to you how you’d prefer to handle you interactions and animation on the page. Do you want them to play only the first time or again if the user scrolls past it but moves back up and down the page?
Parallax Scrolling is a fun way to give your layers in your design a different scroll speed than the rest of the page. You can choose to either slow the element down or speed it up based on user scroll speed.
By using the slider, you can adjust the speed of th layer relative to page. It’s a great way to slow down background elements or speed up foreground elements really make things pop. A great way to add an additional level of polish to your page design with very little setup.
