Rotate element on scroll with element already rotating

[Duo]

Hi,

 

I have an element that rotates infinitely 360 degrees using GSAP. I've also implemented direction-based rotating on scroll using ScrollTrigger. It works great initially but once you begin to scroll either up or down and the scrolling stops, the element jumps to its original rotating position and begins rotating again which isn't ideal.

 

This is the code that I'm using:

 

gsap.to(this.rotatingText, {rotation: 360, duration: 40, repeat: -1});

var rotate = gsap.timeline({
  scrollTrigger: {
    trigger: "html",
    scrub: 0.2,
    start: "top top",
    end: "+=10000"
  }
}).to(this.rotatingText, {
  rotation: 360 * 5,
  duration: 1,
  ease: "none"
})

Ideally, I would love it to, be that after scrolling, it gets the element's current rotated position and then begins rotating again from that point.

 

You can view a video screenshot of the issue here: https://www.veed.io/view/6de5e2cc-072e-45d7-bb30-d015766ae546?sharingWidget=true&panel=share

 

Any help would be greatly appreciated.

 

Thanks

[mvaneijgen]

You could wrap your rotatingText in another element and animate that element on scroll, then with the ScrollTrigger onEnter and onLeave callbacks pause the initial tween and play it again. It is a bit hard to give advies when there is no minimal demo in which we can poke around, so this is the best I can do for now. 

 

The issue you're facing is because two tweens animate the same element and the same property, so you could also look in to overwrite: true on the second tween or instead of a fixed pixel value make it dynamic with `+=${360 * 5}`, but having two distinct elements is the best way to go in my opinion. Hope it helps and happy tweening!  

 

[Duo]

Hi @mvaneijgen

 

Thanks for getting back me to so quickly. It's greatly appreciated.

 

I've created a quick CodePen for you here: 

See the Pen mdaLGpZ by dayneh88 (@dayneh88) on CodePen

[mvaneijgen]

Something like this. Hope it helps and happy tweening! 

 

See the Pen VwqxEOm?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi,

 

I would do it like this:

See the Pen qBLYQZa by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Duo]

You are a superstar @mvaneijgen

 

Thank you so much for being super quick and helpful.