Jump to content
Search Community

Play with delay as an exception

jiggy1965 test
Moderator Tag

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

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

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

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.
×
×
  • Create New...