Christina Hall shows how to build a scroll-triggered animation in Wix Studio where images move into place as you scroll. She uses parallax, sticky positioning, and a 180-degree move animation with 600px distance to create the effect.
Chapters
Let me show you how I created the scroll into Place section using WIX Studio. I'm using a combination of parallax and scrolling animations to make this happen. What I did first is created three equal size images. Then I made sure that my background section has an image applied to it so that we can utilize the parallax effect. What you want to do first is take the first image and set its position type to sticky and then stick it to the top. This is going to ensure that when we scroll, it's staying stuck there the entire time we're scrolling the section. The next thing I did was I moved the second section down a few paces. I'm doing about 6, 600 pixels here and I'm also making sure that that section is set to position type sticky as well as sticking it to the top just like the other square, it's going to make sure it stays stuck. As we continue to scroll. From here, I'm going to select that image and assign its animation. And that's going to be the scroll animation and we're going to choose the move one. We also want to move down and click Adjust animation and make sure the angle it's moving in is at 180 degrees. And I'm going to bump the distance up to 600 pixels and then make the animation area 100%. Let's change.