Jump to content
Search Community

Make a tween that animates nothing

Habit test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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.

Link to comment
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
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...