Rotate element on scroll in the middle is not working

[jafar70]

Hi, I am trying to create a page break animation. 

 

The desired outcome:

 

My problem:

I am having issues trying to centre the blue gradient. The position of the blue gradient also changes depending on the text above.

 

See the Pen zYQpmKW by mrsalami (@mrsalami) on CodePen

[Cassie]

Hi! Could you explain in more detail what you're intending to do?

 

I've made a guess and tweaked your code, but it's unclear whether you're trying to just position the element in the center and then rotate it, or whether you're trying to animate to a central position.

See the Pen OJYzrde?editors=0110 by GreenSock (@GreenSock) on CodePen

Also your trigger points seemed strange, were you intending the stretch the animation over the entire distance of the page? The element is only in view for a short time so this seems a little wasteful? If I were you I'd define the pagebreak itself as the trigger.

 

Hope this helps!

[jafar70]

I fixed the issue.

 

See the Pen KKLZrNB by mrsalami (@mrsalami) on CodePen