Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Yandex.Technologies LLC

overwrite and time

Recommended Posts

Dear GSAP community, I’ve a question about an ‘overwrite’ feature and some timeline time aspects. 

 

If I set an animated parameter without changing the time, it works pretty well! 

Example:

 

But once I am trying not only to set (or change) an animated parameter but to set delay and duration, overwriting doesn’t seem to occur:

See the Pen XWXrgQy by belyanskii (@belyanskii) on CodePen

 

Is there a way to overwrite the whole animation w/o clearing or deleting the tweens/timelines?

See the Pen vYLBZQE by belyanskii (@belyanskii) on CodePen

Link to comment
Share on other sites

Hey Yandex. Some notes:

  1. I highly recommend overwrite: "auto" instead of overwrite: true because it will only kill off the conflicting tweens.
  2. You probably want to set defaults: {overwrite: "auto"} instead so it's passed to each tween.
  3. Why are you using keyframes here? Using regular tweens fixes the issue because defaults on timelines won't get passed to keyframes. They don't get passed to keyframes because keyframes essentially create a sub-timeline and defaults don't apply to those. If you want defaults on keyframes, apply it to the tween itself.
  4. You could technically pass in a defaults option that sets the defaults for each tween. Kinda meta but it works:
    defaults: { defaults: { overwrite: "auto" } }
  5. Another alternative is to use the global defaults for gsap:
    gsap.defaults({overwrite: "auto"});

I'd just use regular tweens:

See the Pen WNreEaa?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

@ZachSaucier 

Big thanks for explaining the ‘keyframes’ and the ‘defaults’ features. My plan is to use them for the easement of describing serial animations (I’ve got plenty of them), if I just use .to with ‘>’, it’s just a repetition of keyframes logic in my code.

 

My example shows that the second declaration .to via keyframes doesn’t let the square decrease - that’s exactly what I want, but it works only without changing the time!

 

There’s a div and it has an animation (a set of different properties). What I want to do is to set the properties instantly without deleting or clearing them, I mean to replace for example { x: 10, y: 10, duration: 5 } by { x: 5, y: 5, duration: 3 } on the fly with minimal delay.

 

Is it possible, or i just need to optimize logic and for example clear-reinit only changed tweens/timelines?

 

See the Pen vYLBZQE by belyanskii (@belyanskii) on CodePen

Link to comment
Share on other sites

3 hours ago, Yandex.Technologies LLC said:

Is it possible, or i just need to optimize logic and for example clear-reinit only changed tweens/timelines?

If I'm understanding you correctly, reinitializing tweens/timelines is definitely the more standard and preferred way.

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.
×