How To Use Animate And Create A Parallax

This video features an old UI. Updated version coming presently!

The parallax effect creates an illusion of depth and perspective. Y'all tin accomplish it past 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'south content in various ways, for case 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'southward 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:

Create the initial set up
Ascertain the blitheness
Define the whorl blitheness
Preview the animation
Add together more animations
Plough the animation off for devices

Pro tip — Illusion of depth

Simulate a credible 3D space by post-obit depth perception principles. These include the size and position of elements and diverse shadow distances. Even blur effects tin be used to simulate depth of field.

Create the initial setup

Step 1. Add a section

First, let'southward create a section that can be scrolled into and out of view. Elevate a Section element onto the canvass from the Elements panel constitute on the left. Place it below the fold and also higher up the other sections.

Step ii. Gear up the section

While the section is selected, in the Mode panel on the right, add some top and bottom padding. Also, set the overflow to hidden to keep the content inside the bounds of the section.

Pace 3. Add a container

Elevate a Container element from the Elements panel and drib information technology inside the department. Ready its height to 1200px and its position to relative. This will enable you to position images admittedly within the container.

Step 4. Bring in images

Drag an image from the Assets panel into the department. Set an appropriate width and repeat the procedure for all images. Since you desire to create an illusion of 3D space, make sure you take that into consideration when setting epitome dimensions.

Good to know

You can prepare the width of an image in the prototype settings modal. To open up it, either double-click the image or click the cog icon next to the image label. The image Settings are also located in the Chemical element Settings panel on the right of the Designer. You can admission them by selecting the epitome and pressing D on your keyboard.

Setting the prototype size in the image settings volition utilise the values to that prototype on all device breakpoints. To set different dimensions for an image on dissimilar devices, set the width through the Style Panel.

Stride 5. Style the images

Add a drop shadow to each paradigm. Brand sure all images have the same shadow angle. Change the color and opacity of the shadow. Prepare its distance from the epitome boundaries. Add together some blur and set the size or spread of the shadow relative to the paradigm boundaries also.

Stride vi. Position the images

The side by side task is to set the position of each image to absolute. Then position each image by irresolute any of the position values using the UI, or past 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 too overlap any images that appear in the groundwork.

Ascertain the blitheness

Understanding the animation helps you lot identify the trigger and action that you need to ascertain in gild to attain the aim you accept in mind.

In this animation, you want to animate the images when the section (an element) scrolls through the viewport. And so, the trigger is an element trigger of while scrolling in view. And the action will be an on roll blitheness.

Step 7. Set the trigger

At present that you've identified the elements of your interaction, yous tin can first creating it. Select the section that contains the images you created. Open up the Interactions panel and create an element trigger of while scrolling in view.

Step viii. Configure the trigger

Choose to play scroll blitheness. Change the animation boundaries if you'd like. This enables you to ready when the animation starts and ends. By default, the animation begins when the department starts entering the viewport, and it ends when it leaves the viewport. Keep the default for this tutorial.

Define the scroll blitheness

Defining your aim can help you identify the deportment that yous need to set. The aim at this betoken is to movement the images at various speeds. Those in the front should announced to be moving faster than those in the back as you scroll through the section. And so, you'll exist creating a coil action of move for each image. Then, set the position of each epitome on the y-centrality at the beginning and stop of the animation.

Step 9. Create the scroll animation

Before creating the blitheness, let's talk about smoothing. Smoothing, or damping, softens and smooths out the approaching velocity towards the correct position on the animation timeline. You tin can conform the value of smoothing underscroll animations. For this tutorial, you can leave it at l%.

Now, create a newscroll activeness and and so rename it to "Parallax scroll consequence".

Footstep 10. Perform a movement action

Select the image that has the highest z-index and appears to exist the closest to your viewpoint. Add a scroll activity of motion to alter how the paradigm moves during the animation.

Ii keyframes or instances of the image are added to the animation timeline. One is set at 0% – the beginning of the blitheness; and one at 100% – the end of the animation.

Pace eleven. Prepare an initial position

Select the first keyframe at 0%. In the motility transform settings, movement the prototype downward by setting its position on the Y-axis to 1000px. This volition be the position of the image as the section start scrolls into view.

Step 12. Establish a final position

Select the second keyframe in the blitheness timeline, and movement the image up by setting its position on the y-centrality to -1000px. This will exist the position of the image as the section scrolls out of view.

Step 13. Gear up a 2d activeness

Select the epitome that has the everyman z-index and appears to be positioned mode in the dorsum of the section. Add a scroll activeness of move. 2 new keyframes are added to the blitheness timeline for this new image, one at 0% and another at 100%.

Define the initial position

Select the keyframe at 0% for this new image. In the move transform settings, move the paradigm up by setting its position on the Y-centrality to -352px. This image will outset moving from this position as the section scrolls into view.

Prepare the last position

Select the keyframe at 100% for the aforementioned image, and set up the position on the Y-axis to 352px. This epitome volition travel downward to this position every bit y'all scroll down the page. If you've changed the easing setting for the previous deportment, make sure you set the same easing on all deportment.

Footstep 14. Create a third blitheness

Select some other image in the foreground. Add a coil action of move. For the starting time keyframe, move information technology down. Fix a Value of 300px. For the second keyframe, move the image up. Now set a value similar -500px. This volition make the prototype travel a altitude of 800px, which is slower than the closest image and faster than the farthest ane.

Preview the animation

Preview the animation in preview mode of the Designer or live on the canvass by toggling live preview on. Now the parallax event is more pronounced, and y'all've created what appears similar another level of depth in this animation. Brand adjustments to the positions or easing to accomplish the desired result.

‍Turn on Live Preview to see the effect as you lot scroll the canvas. The prototype appears to motion at a faster rate, which gives us that parallax event because the image also appears closer to usa.

Add together more than animations

Continue adding coil actions to each of the images you desire to animate during this scroll blitheness sequence. Make certain you follow this logical design to create a adept parallax scrolling animation: elements in the front (those with college z-index) appear to be moving at a faster rate than those in the dorsum (those with lower z-index).

Plough the animation off for devices

Yous can choose to plough off this animation on mobile devices. Close the animation timeline past clicking on the X next to "Parallax whorl effect". And so under other settings, toggle off the devices that you don't want this interaction to exist triggered.

Good to know — Speed of Motion

When you're setting the position of the images on the y-axis, y'all're also setting the speed of movement. That'south because as you lot scroll through the department, the kickoff image travels from y-position of 1000px to y-position of -1000px – a altitude 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 at that place are three planes or levels of depth in that section:

the first level — in which the image appears closer and besides to exist moving faster
the second level — where almost all the other images appear to move at a normal rate
the tertiary level — in which the image appears farther back and to be moving at a much slower rate

Source: https://university.webflow.com/lesson/parallax-movement-on-scroll

Posted by: sullivanwhinged.blogspot.com