In this design we have a 3D scroll effect applied to an image,
but when we scroll through the page, the image doesn’t start moving until it’s almost out of view.
How do we get the scroll effect to happen sooner?
Let’s fix it.
If a scroll animation isn’t happening when we want it to, there are two properties to look at—the Animation path, and Animation area.
So let’s look at the properties for this 3D spin animation.
The Animation path defines whether the animated element is either going to start from where we’ve placed it, which we call “From its design.” Or it’s going to start somewhere else, and move to where we’ve placed it, which is “To its design.” Right now the element is set to move “To its design. “
Next let’s check the Animation area. The Animation area defines where the element starts and stops animating while we scroll.
This is what’s causing the issue—we had the animation area set from 80 to 100 percent.
We use this scale to decide at what point while scrolling the element starts and stops animating. Zero percent means the animation starts as soon as the element enters the viewport from the bottom.
And 100% means the animation ends when the element leaves the viewport at the top of the screen.
To help us visualize better, this red line shows up in preview to show us where in the animation area our element is as we scroll.
So right now, the animation is starting when the element is 80 percent of the way up the screen and ending when it leaves the viewport. But the reason it’s a problem, is because that doesn’t work with the animation path.
Let’s go back for a second to the Animation path. When you first set the Animation path, it has a default animation area that works logically with it.
When we choose “From its design,”
The animation area is pre-set to go from 50 to 100%. The element stays where we’ve placed it until it reaches the middle of the screen, and animates until it’s out of view.
But when we change it back,
The default animation area changes to zero to 50. So the element starts moving when it enters the screen from the bottom, and reaches its final position when the element is halfway to the top.
Because this element is moving “to its design”, it makes more sense for it to start sooner, when it enters the viewport, otherwise it’s out of place for most of the scroll. We’ll make sure the Animation area starts at zero percent.
And in this example we want the animation to end before our element gets to the middle of the screen, so we’ll set the end point to come before 50 percent.
One last tip—make sure that you give yourself enough room to scroll. Especially if the element is in the first or last fold on the page. Otherwise, you might not see the effect.
So now I’ll preview to check that the problem is solved. There we go, it starts animating right from the bottom of the viewport.
Thanks for watching. Check out more Troubleshoot videos in the Wix Studio Academy.
