emjay Posted November 11, 2020 Share Posted November 11, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 11, 2020 Share Posted November 11, 2020 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(); }); }); 3 Link to comment Share on other sites More sharing options...
akapowl Posted November 11, 2020 Share Posted November 11, 2020 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 3 Link to comment Share on other sites More sharing options...
akapowl Posted November 11, 2020 Share Posted November 11, 2020 @ZachSaucier is still too fast for me 1 Link to comment Share on other sites More sharing options...
mikel Posted November 11, 2020 Share Posted November 11, 2020 Hey GUYS, Just a funny alternative See the Pen LYZXqqQ by mikeK (@mikeK) on CodePen Happy shaking ... Mikel 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now