Jump to content
GreenSock

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

Make a tween that animates nothing

Recommended Posts

I'm have a function that takes an html element, and animates it (using gsap). Thing is, sometimes I don't want to animate anything, I just want to wait for some duration, before proceeding with the subsequent animations. I know I can do that with JS promises and setTimeout, but it's important that I should be able to .pause(), .resume() and .timescale() this "nothing" animation (using these method names, for convenience).

 

How can I do that? I've tried feeding in undefined and "" (empty string) to the target parameter (I'm using TimelineMax.fromTo), but that hasn't worked.

Share this post


Link to post
Share on other sites

Two alternatives.

 

Use a delayedCall() or a dummy TweenLlite.

 

https://greensock.com/docs/v2/TweenLite/static.delayedCall()

const myCallback = function () {
  // code you want to execute when the time has passed
};

const t = TweenLite.delayedCall(time, myCallback);

A delayed call returns the TweenLite instance so you  can use all the TweenLite/Max methods.

 

A dummy Tween is basically an GSAP instance that takes an empty object as target and does nothing for a specific amount of time:

const t = TweenLite.to({}, time, {});

Now you mention this:

7 minutes ago, Habit said:

Thing is, sometimes I don't want to animate anything, I just want to wait for some duration, before proceeding with the subsequent animations.

Seems to me that perhaps you're using a timeline instance (you didn't even provided a small snippet of code so I'm guessing here ;)), in which case the you can use the dummy instance or event better the position parameter:

 

It would be nice to have some clarification of what you're trying to do.

 

Happy Tweening!!

 

  • Like 6

Share this post


Link to post
Share on other sites

Thanks @Rodrigo, that solved my problem! Based on your TweenLite example, I solved it by passing in an empty object as the target

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×