Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jiggy1965

Play with delay as an exception

Recommended Posts

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

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

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

Alternatively to using .restart() you could use a .delayedCall() to wait to play it the first time.

  • Like 1
Link to comment
Share on other sites

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

That's because you're calling the function immediately. Just pass in the function name:

tl.delayedCall(2, playAnimation);

 

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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);

 

  • Like 2
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×