Last Update: August 8, 2024
Perspective Animations on Scroll Trigger are animations that create a three-dimensional (3D) effect on webpage elements as the user scrolls down the page. These animations change the perspective of elements, making them appear as if they are moving in 3D space, enhancing the visual depth and dynamism of the page.
How to Set Perspective Animations on Scroll Trigger
You can set this animation on Pages or Appearance -> Editor. Then open the pages or site editor :
1.
Inside the Editor, click on the blocks you want to add Perspective Animations.
2.
Then a side bar will opened and click panel Advanced Animation -> Scroll Trigger.
3.
On Scroll Trigger, you need to set an Anchor first to initiate the animation. You can learn how to set an animation anchor in This Article.
4.
To ensure the Perspective Animation works correctly, it should be combined with other animations (e.g., Rotate). Begin by selecting Animation Type -> Perspective, followed by Animation Type -> Rotate.
5.
For the Perspective Animation, you can follow the settings below. This is just an example, you can adjust it according to your own needs.
6.
For the Rotate Animation, you can follow the settings below. This is just an example, you can adjust it according to your own needs.
7.
To make the element return to its original state when the mouse moves away, activate Reverse Animation by setting Reverse Animation -> ON.
