smooth gsap easing in the start and at the end but not in between

[nicmare 5 Likes (Newbie)]

Hi Gsaps!

i created a nice mouse over / leave effect and i am nearly happy with it. As you can see the transition between infinite loop part and start and end tween has some glitches. any idea how to improve it?

cheers

nic

See the Pen gOWdEyw by nicmare (@nicmare) on CodePen

[Cassie 5,650 Likes (Superhero)]

Hey! 

Common practice for mouseover/leave is usually play and reverse. Does this help or are you trying to achieve something different?

See the Pen dyWqLWM?editors=0010 by GreenSock (@GreenSock) on CodePen

[Cassie 5,650 Likes (Superhero)]

I jumped the gun a bit here. If you're trying to have an infinite loop with a smooth ease out then maybe like this would be better?

See the Pen vYmzMWx?editors=0010 by GreenSock (@GreenSock) on CodePen

[OSUblake 18,534 Likes (Superhero)]

You can animate the timeScale of your animation.

 

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

 

[nicmare 5 Likes (Newbie)]

the timescale example is what i was looking for. in the start there is smooth easing, in the middle(during hover) an infinite loop and at the end it kinds of fades out with easing. thanks @OSUblake – but i like the code more of @cassie 2nd codepen as i need to be sure to trigger animation for the current element if there are multiple with same classes at once. so this is my final code:

$(".btn-rotated").mouseover((e) => {
    gsap.to(e.currentTarget, {
      duration: 5,
      ease: "none",
      rotation: "-=360deg",
      repeat: -1
    });
}).mouseleave((e) => {
    gsap.to(e.currentTarget, {
      duration: 2,
      ease: "power.out",
      rotation: "-=50deg",
      overwrite: true
    });
});

only thing whats missing is the smooth easing start. 

[OSUblake 18,534 Likes (Superhero)]

9 minutes ago, nicmare said:

but i like the code more of @cassie 2nd codepen as i need to be sure to trigger animation for the current element if there are multiple with same classes at once.

 

Yeah, that's what loops are for. 😉

 

gsap.utils.toArray(".btn-rotated").forEach(btn => {
  
  const animation = gsap.to(btn, {
    paused: true,
    rotation: 360,
    repeat: -1,
    ease: "none",
    duration: 5
  }).timeScale(0);
  
  btn.addEventListener("mouseenter", () => {
    animation.play();
    gsap.to(animation, {
      timeScale: 1,
      duration: 1,
      overwrite: true
    });
  });
  
  btn.addEventListener("mouseleave", () => {
    gsap.to(animation, {
      timeScale: 0,
      duration: 1,
      overwrite: true,
      onComplete() {
        animation.pause();
      }
    });
  });
});

 

 

[nicmare 5 Likes (Newbie)]

nice one! that utils wrapper was the missing piece. works like a charm now: https://www.loom.com/share/a2f92a8afedd4bf691787b9c045e5fa5