Streaming live at 10am (PST)

Rotate a fixed div on scroll!


#1

Hi there!

Is there a way to rotate a fixed div on scroll?

The options in ‘Interactions’ are for ‘Scroll into view’, and ‘Scroll out of view’ - but the div will always be in view.

When I scroll down the page, I want the div to rotate but to stay in its fixed position.

Any help greatly appreciated!


#2

An interaction trigger doesn’t have to be placed on the element that is going to animate.

You can use an invisible (dummy) element that enters the screen when you want the anim to start, and affect your rotating div.


#3

Hi Josh

I think I might have an idea of what you mean.

  1. Assign a class (if you haven’t already) to the div you want to spin, e.g. “RotateDiv”

  2. Select the section where you want the div to spin when you get to it.

  3. Add an animation to the section.

  4. You can ignore initial appearance here (this’ll affect the section) but go straight to Trigger(s)

  5. Set the trigger to scroll and then just beneath that select Affect different element(s). Type in what you named the div, in my example this would be “RotateDiv”

  6. Now set the animation.

  7. Test it out. You can adjust the offset for the scroll effect so that it begins sooner than when the section comes into view or later so play around and see what happens.

I think that should work, I wish I could test it now and be able to do a better guide but hopefully that helps you out. Once you’re happy with it you can just apply the same interaction for all the sections you want it to happen with and it’ll be sorted.

Let me know if that works

Cheers

Jon


#4

Amazing!!

Thank you everyone - got it working using an invisible section.

Really appreciate the help.


#5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.