Element "jumping" from its initial position to another (scrollTrigger)

[clhomme]

Hello everyone! My problem probably has a very simple solution, but I can't find it. I have some sort of banner that would start out at like 90deg, and would rotate back to an horizontal position as I scroll. My problem is, it starts out at one position and sort of jumps to another when the animation is triggered (the second position is actually the one I would like the banner to be from the start). Does anyone might know what's causing this issue?

 

Thank you very much!

See the Pen poxQYja by Dhandelyon (@Dhandelyon) on CodePen

[Rodrigo]

Hi,

 

Use the same transform origin in your set instance:

 

gsap.set(".banner", { rotation: 90 , transformOrigin: "0% 0%", });

 

Happy Tweening!