I would like to rotate the nvg’s on the website and i would like the user to scroll down the website and when the spline model appear it rotate 360° but stay in the middle of the screen. Currently it spins but the model is also mooving upward and downward, it’s not what i want. Thanks for any help !
Hi there,
To create a centered rotation effect with scroll animations, here’s how to set it up:
First, set up the rotation transform:
- Select the parent container of your rotating element
- In the Style panel, go to Effects and enable Children perspective
- Select your rotating element
- In the Style panel, go to Transform
- Add a rotation transform (rotateX, rotateY, or rotateZ depending on your needs)
- Adjust the transform origin to “Center” if you want the rotation to happen from the center
For the scroll-based animation:
- Select your rotating element
- Open the Interactions panel
- Add a Scroll animation
- Choose “While scrolling in view” as the trigger
- Add a Transform animation
- Set your desired rotation values for the start and end positions
- Adjust the viewport start and end positions to control when the rotation occurs
The rotation will now smoothly animate as users scroll through your page. You can fine-tune the timing and easing in the Interactions panel.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
What you are saying only make it rotate, but when i scroll the 3d model go up and down, i want it to stop in the middle of the screen while it hasn’t made a 360° rotation
Hey @Robin_Bonfill,
I believe this tutorial might help you out in ensuring your animation completes before elements at the bottom come into view.