jiggy1965 Posted August 13, 2020 Share Posted August 13, 2020 I used GSAP in combination with Adobe Animate. Started of with this animation: var tl = new TimelineMax({ paused:true }) tl.to(backgroundtarget, 3, {x:-200, ease: "sine.out"}) function playAnimation() { tl.play(); } function reverseAnimation() { tl.reverse(); } On mouseover and mouseout I'm having the animations played forwards and backwards. From the start however I wish the animation forward to be autoplayed, but with a delay of 2 seconds. If I were to add tl.play(); on the first frame it would already start moving. I know I could use this: tl.to(backgroundtarget, 3, {delay: 2, x:-200, ease: "sine.out"}) But later on on mouseover the tl.play(); would also start 2 seconds later. Also tried this: tl.delay(2); tl.play(); tl.delay(0); Bit that didn't help. Even though delay was being set to 2 in the first line the tl animation still autoplayed directly. How can I use something like tl.delay(2).play(); to have the tl animation run 2 seconds later while still running directly on later mouseovers? Link to comment Share on other sites More sharing options...
jiggy1965 Posted August 13, 2020 Author Share Posted August 13, 2020 This for example won't work: var backgroundtarget = this.background var tl = new TimelineMax({ paused:true }) tl.to(backgroundtarget, 3, {x:-200, ease: "sine.out"}) function playAnimation() { tl.play(); } function reverseAnimation() { tl.reverse(); } tl.delay(2); tl.play(); tl.delay(0); At the start I wish to have run playAnmation, but after 2 seconds. Later on on mouseover/mouseout I wish to rund either playAnimation or reversAnimation, but without the 2 second delay. With above code the first autoplay animation still runs immediately without 2 second delay Link to comment Share on other sites More sharing options...
mikel Posted August 13, 2020 Share Posted August 13, 2020 Hey @jiggy1965, Do you expect this to happen? See the Pen bce8f78fe20cd9b66ae29c588dae4c4f by mikeK (@mikeK) on CodePen A CodePen would have been nice. Happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
jiggy1965 Posted August 13, 2020 Author Share Posted August 13, 2020 Yes, more or less. The animation runs after 2 seconds. And on mouseenter that same animation should run without delay. You used restart() for that. Didn't know about that one yet. The problem is that when I do a mouseenter while your cube is rotating it immediately returns to its starting position. After that mouseenter and mouseleave work normally. So the problem occurs while doing a mouseenter on that cube while it rotates for the first time after 2 seconds.. Oh and I don't have a codepen as this one I'm working on is using and Adobe Animate fla file Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 13, 2020 Share Posted August 13, 2020 Alternatively to using .restart() you could use a .delayedCall() to wait to play it the first time. 1 Link to comment Share on other sites More sharing options...
jiggy1965 Posted August 13, 2020 Author Share Posted August 13, 2020 30 minutes ago, ZachSaucier said: Alternatively to using .restart() you could use a .delayedCall() to wait to play it the first time. I also tried that one: this.stop(); var backgroundtarget = this.background; var tl = new TimelineMax({ paused:true }) tl.to(backgroundtarget, 3, {x:100, ease: "sine.out"}) function playAnimation() { tl.play(); } function reverseAnimation() { tl.reverse(); } tl.delayedCall(2, playAnimation()); But the animation still runs directly instead of with a delay of 2 seconds. Attached the fla file (and the html file). You can see from the html file that the blue square already starts moving from the start. Instead of waiting for 2 seconds test.fla test.html Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 13, 2020 Share Posted August 13, 2020 That's because you're calling the function immediately. Just pass in the function name: tl.delayedCall(2, playAnimation); 1 Link to comment Share on other sites More sharing options...
jiggy1965 Posted August 13, 2020 Author Share Posted August 13, 2020 8 minutes ago, ZachSaucier said: That's because you're calling the function immediately. Just pass in the function name: tl.delayedCall(2, playAnimation); Tried it, but then the square just keeps on standing still... Link to comment Share on other sites More sharing options...
jiggy1965 Posted August 13, 2020 Author Share Posted August 13, 2020 Attached the updated files using this code: var backgroundtarget = this.background; var tl = new TimelineMax({ paused:true }) tl.to(backgroundtarget, 3, {x:100, ease: "sine.out"}) function playAnimation() { tl.play(); } tl.delayedCall(2, playAnimation); As you can see the square now doesn't move at all... test.fla test.html Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 13, 2020 Share Posted August 13, 2020 2 minutes ago, jiggy1965 said: Tried it, but then the square just keeps on standing still... Got a minimal demo of the issue for us to check out then? Side note: You're using a mix of old and new syntax. We recommend the new syntax - check out this post for more info: Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 13, 2020 Share Posted August 13, 2020 1 minute ago, jiggy1965 said: As you can see the square now doesn't move at all... I get errors when I try to run those files. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 13, 2020 Share Posted August 13, 2020 Ah, it's because you accidentally used the tl as a reference and I didn't catch it the first time. It should be: gsap.delayedCall(2, playAnimation); 2 Link to comment Share on other sites More sharing options...
jiggy1965 Posted August 13, 2020 Author Share Posted August 13, 2020 15 minutes ago, ZachSaucier said: Ah, it's because you accidentally used the tl as a reference and I didn't catch it the first time. It should be: gsap.delayedCall(2, playAnimation); That was indeed it! It's working now. Thanks a lot 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