Jump to content
Search Community

.click event stopping tween?

SummerBummer 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 need some help, 

 

I am not sure why my jQuery .click event stop the TweenMax.staggerTo(balloon)?

 

I was able to get it to kind of work by creating a Timeline for the above event and doing a tl.restart() but that caused a bunch of jumping around....

 

I would like the balloons to continue the bouncing animation after the animation that plays on the .click...

 

Thank you in advance for your help! 

See the Pen dwrzKQ by SummerJones (@SummerJones) on CodePen

Link to comment
Share on other sites

10 hours ago, mikel said:

Hi @SummerBummer,

 

Welcome to the GreenSock Forum.

 

Your click function overrides the x value of the stagger one. So give it a try: 'overwrite: 0'

 

Happy tweening ...

Mikel

 

 

 

Thank you!

How did you figure out it was overwriting the x, are you able to see that in the developer tools or did you just know? 

Link to comment
Share on other sites

Hi @SummerBummer,

 

If you tween the same object, the same property, you should have in mind what was and what is going on.


A little more to overwrite here and in the docs

 

overwrite String (or integer)  - Controls how (and if) other tweens of the same target are overwritten. There are several modes to choose from, but "auto" is the default (although you can change the default mode using theTweenLite.defaultOverwrite property):
  • "none" (0) (or false) - no overwriting will occur.
  • "all" (1) (or true) - immediately overwrites all existing tweens of the same target even if they haven't started yet or don't have conflicting properties.
  • "auto" (2) - when the tween renders for the first time, it will analyze tweens of the same target that are currently active/running and only overwrite individual tweening properties that overlap/conflict. Tweens that haven't begun yet are ignored. For example, if another active tween is found that is tweening 3 properties, only 1 of which it shares in common with the new tween, the other 2 properties will be left alone. Only the conflicting property gets overwritten/killed. This is the default mode and typically the most intuitive for developers.
  • "concurrent" (3) - when the tween renders for the first time, it kills only the active (in-progress) tweens of the same target regardless of whether or not they contain conflicting properties. Like a mix of "all" and "auto". Good for situations where you only want one tween controling the target at a time.
  • "allOnStart" (4) - Identical to "all" but waits to run the overwrite logic until the tween begins (after any delay). Kills tweens of the same target even if they don't contain conflicting properties or haven't started yet.
  • "preexisting" (5) - when the tween renders for the first time, it kills only the tweens of the same target that existed BEFORE this tween was created regardless of their scheduled start times. So, for example, if you create a tween with a delay of 10 and then a tween with a delay of 1 and then a tween with a delay of 2 (all of the same target), the 2nd tween would overwrite the first but not the second even though scheduling might seem to dictate otherwise. "preexisting" only cares about the order in which the instances were actually created. This can be useful when the order in which your code runs plays a critical role.

Kind regards

Mikel

 

 

  • Like 3
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...