Jump to content

Guest Pusher

Fire another function when Tween is 50% complete

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

Hi there,


This could be a weird question but is it possible to onComplete:50%.


Ideally I would like to trigger some animations when an animation is 10%, 20%, 30%, 40% complete etc.


The below code is wrong but i thought i would post it as a talking point. :)

.from("#animation", 20, {left:990, onComplete50%: stopFunction})

What is the best way to do this?





Link to comment
Share on other sites

Hey Phil, why not just position tweens on a timeline using the relative or absolute positioning?

.from("#animation", 20, {left:990}) 
.from("#animation50percent", 20, {left:990}, '-=10') // this will start half way through the previous tween

You can use similar concept for nesting timelines if your animation is more complex.


Here's a TimelineLite tutorial explaining how the positioning of tweens on a timeline works.


Hope that helps.




Link to comment
Share on other sites

Triggering something every at set intervals could be done like Petr showed, where you just add it to the timeline at a specific position. Or you could set a delayedCall or a tween to repeat at the intervals you need that would trigger the animations. All of those solutions would work well, although they might not offer enough flexibility in some cases.


When there is only one animation to trigger, like say at 50%, what I have done in the past is just check to see if the progress of the timeline is greater than 50%. If it was then I would start the animation. You can do the same thing here. The only difference is that for intervals you will need to use the modulus operator on the progress value.


See the Pen 54c5f0deb2182acef3c464f76c9b5fc2 by osublake (@osublake) on CodePen

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.