Use parallax motion based on your scroll position to give the appearance of depth.
The parallax effect creates an illusion of depth and perspective. You can achieve it by moving visual elements at different speeds. Creating animations using the parallax effect can serve many purposes, and enables your visitors to engage with your site’s content in various ways, for example showing how something works or highlighting the anatomy of a product. Or it can create a visual effect that keeps your site’s visitors surfing for longer. Webflow’s new Interactions 2.0 makes integrating such animations in your website a snap, without you having to write a single line of code.
In this lesson:
First, let’s create a section that can be scrolled into and out of view. Drag a Section element onto the canvas from the Elements panel found on the left. Place it below the fold and also above the other sections.
Drag a Container element from the Elements panel and drop it inside the section. Set its height to 1200px and its position to relative. This will enable you to position images absolutely within the container.
Drag an image from the Assets panel into the section. Set an appropriate width and repeat the procedure for all images. Since you want to create an illusion of 3D space, make sure you take that into consideration when setting image dimensions.
Add a drop shadow to each image. Make sure all images have the same shadow angle. Change the color and opacity of the shadow. Set its distance from the image boundaries. Add some blur and set the size or spread of the shadow relative to the image boundaries as well.
The next task is to set the position of each image to absolute. Then position each image by changing any of the position values using the UI, or by manually typing them in each input. Specify a z-index for images. Set a higher z-index for those images that you want to appear closer and also overlap any images that appear in the background.
Understanding the animation helps you identify the trigger and action that you need to define in order to achieve the aim you have in mind.
In this animation, you want to animate the images when the section (an element) scrolls through the viewport. So, the trigger is an element trigger of while scrolling in view. And the action will be an on scroll animation.
Now that you’ve identified the elements of your interaction, you can start creating it. Select the section that contains the images you created. Open the Interactions panel and create an element trigger of while scrolling in view.
Choose to play scroll animation. Change the animation boundaries if you’d like. This enables you to set when the animation starts and ends. By default, the animation begins when the section starts entering the viewport, and it ends when it leaves the viewport. Keep the default for this tutorial.
Defining your aim can help you identify the actions that you need to set. The aim at this point is to move the images at various speeds. Those in the front should appear to be moving faster than those in the back as you scroll through the section. So, you’ll be creating a scroll action of move for each image. Then, set the position of each image on the y-axis at the beginning and end of the animation.
Before creating the animation, let’s talk about smoothing. Smoothing, or damping, softens and smooths out the approaching velocity towards the correct position on the animation timeline. You can adjust the value of smoothing under scroll animations. For this tutorial, you can leave it at 50%.
Now, create a new scroll action and then rename it to "Parallax scroll effect".
Select the image that has the highest z-index and appears to be the closest to your viewpoint. Add a scroll action of move to alter how the image moves during the animation.
Two keyframes or instances of the image are added to the animation timeline. One is set at 0% – the beginning of the animation; and one at 100% – the end of the animation.
Select the first keyframe at 0%. In the move transform settings, move the image down by setting its position on the Y-axis to 1000px. This will be the position of the image as the section first scrolls into view.
Select the second keyframe in the animation timeline, and move the image up by setting its position on the y-axis to -1000px. This will be the position of the image as the section scrolls out of view.
Select the image that has the lowest z-index and appears to be positioned way in the back of the section. Add a scroll action of move. Two new keyframes are added to the animation timeline for this new image, one at 0% and another at 100%.
Select the keyframe at 0% for this new image. In the move transform settings, move the image up by setting its position on the Y-axis to -352px. This image will start moving from this position as the section scrolls into view.
Select the keyframe at 100% for the same image, and set the position on the Y-axis to 352px. This image will travel down to this position as you scroll down the page. If you’ve changed the easing setting for the previous actions, make sure you set the same easing on all actions.
Select another image in the foreground. Add a scroll action of move. For the first keyframe, move it down. Set a Value of 300px. For the second keyframe, move the image up. Now set a value like -500px. This will make the image travel a distance of 800px, which is slower than the closest image and faster than the farthest one.
Preview the animation in preview mode of the Designer or live on the canvas by toggling live preview on. Now the parallax effect is more pronounced, and you’ve created what appears like another level of depth in this animation. Make adjustments to the positions or easing to achieve the desired result.
Continue adding scroll actions to each of the images you want to animate during this scroll animation sequence. Make sure you follow this logical pattern to create a good parallax scrolling animation: elements in the front (those with higher z-index) appear to be moving at a faster rate than those in the back (those with lower z-index).
You can choose to turn off this animation on mobile devices. Close the animation timeline by clicking on the X next to "Parallax scroll effect". Then under other settings, toggle off the devices that you don’t want this interaction to be triggered.
When you’re setting the position of the images on the y-axis, you’re also setting the speed of motion. That’s because as you scroll through the section, the first image travels from y-position of 1000px to y-position of -1000px – a distance of 2000px. The second image travels a shorter distance of 704px as it moves from a y-position of -352px to a y-position of 352px. So it appears there are three planes or levels of depth in that section:
Something went wrong while submitting the form. Please contact email@example.com