remove little pause on infinite repeating a shaking apple

[emjay]

Hello @all

 

A small question about the following pen. When the timeline has run through and restarted there is a short pause. I have tried several things, but I can't get rid of this pause. Can anyone tell me how I can remove this pause? Additionally the reverse is not working great, what I'm do wrong?

 

Then I would like to know if my procedure is ok or if there is an easier procedure I should choose.

 

And last but not least, if someone knows a good easing to make the shaking a little bit nicer, I would be glad to get some information about it.

See the Pen d931b310a24b189377b58b811e28bbd9 by emjay (@emjay) on CodePen

[ZachSaucier]

Hey emjay. There's not any pause in your pen? Perhaps the easing makes you think there is a pause? You could set the ease to none and see if that starts when you expect it to.

 

The reverse issue is because you have .reverse(1) which moves the playhead to a time of 1 second. 

 

Here's how I might set it up:

jQuery(function ($) {
  gsap.set(".apple", { transformOrigin: "top 60%" });
  
  var appleAnimation = gsap.timeline({
    paused: true,
    repeat: -1,
    defaults: { 
      duration: 1,
      ease: "none"
    }
  })
  .to(".apple", { rotation: 10 })
  .to(".apple", {
    duration: 2,
    rotation: -10
  })
  .to(".apple", { rotation: 0 })

  $(".apple")
    .on("mouseenter", function () {
      appleAnimation.timeScale(3).play();
    })
    .on("mouseleave", function () {
      appleAnimation.reverse();
    });
});

 

[akapowl]

 

Hey @emjay

 

The little pause you see there, happens because of the default ease apllied to tweens by GSAP. You can get rid of it, by setting ease: "none" to your tweens.

And since you are repeating a lot of stuff in your tweens, it would probably be goog to take a look at gsap.defaults()

 

 

There probably are many different approaches to something like this, but just as an example i chose the following:

 

        appleAnimation       
          .addLabel('zero-position-one')
          .to(".apple", {duration: 1, rotation: 10, transformOrigin:"top 60%", yoyo: true, ease:"sine.out"})
          .to(".apple", {duration: 1, rotation: 0, transformOrigin:"top 60%", yoyo: true, ease:"sine.in"})
          .addLabel('zero-position-two')
          .to(".apple", {duration: 1, rotation:-10, transformOrigin:"top 60%", yoyo: true, ease:"sine.out"})
          .to(".apple", {duration: 1, rotation:0, transformOrigin:"top 60%", yoyo: true, ease:"sine.in"})
          .addLabel('zero-position-three')
          ;

 

I split that 2-second tween you had there in the middle into two seperate tweens, too, with each having a duration of 1 now (just like the movement you had in the other direction in your example (and also added a little ease, split between in and out).

 

For every time, the tween comes to zero-position (as in your apple being not rotated, but centered), I added a label, so in the mouseleave, instead of reversing the timeline, you could tween your timeline to the next label, which is in rotation 0.

 

appleAnimation.tweenTo( appleAnimation.nextLabel(), { ease: "sine.out" } );

 

 

All in all it looks like this, just overall a bit smoother.

 

See the Pen 29f1d6031e8185d3acef6bb887b6fa20 by akapowl (@akapowl) on CodePen

 

As already stated, this is just one of certainly many many approaches.

 

Hope it helps a bit, though.

Cheers,

 

Paul

 

[akapowl]

@ZachSaucier is still too fast for me  

[mikel]

Hey GUYS,

 

Just a funny alternative

 

See the Pen LYZXqqQ by mikeK (@mikeK) on CodePen

 

Happy shaking ...

Mikel