Jump to content

# 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?

Thanks,

Phil

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

Cheers

Petr

##### 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

##### Share on other sites

Here's a variation of that example because that might cause the same interval to fired more than once for a long tween.

See the Pen 0a0d8d90e211b414e738c6ae4e26fcb2 by osublake (@osublake) on CodePen

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