Jump to content
Search Community

how to get end of each animation

eomerb test
Moderator Tag

Recommended Posts

hello there,

I am working on a timeline which has several animations

like

let objArr = [] 

let objArr2=[]

let tl = gsap.timeline()

tl.staggerFrom(objArr,1,{

    opacity:0

})

tl.staggerFrom(objArr2,1,{

  rotation:180

},0.5)

tl.staggerFrom(objArr,1,{

   y:-10

})

I want to trigger one or different methods each these 3 completed

onComplete method on tl triggers only when these 3 are done

please help 

thanks

Link to comment
Share on other sites

Hi @eomerb,

 

You'll want to use onComplete within each tween rather than on the master timeline (see console output)

 

See the Pen abzVbYr?editors=1010 by sgorneau (@sgorneau) on CodePen

 

Also, please take note of the new syntax (for GSAP 3) with regard to the duration property and how stagger is now addressed. For example, a .staggerFrom tween is now a .from tween with stagger as a property. Passing a single numeric value will affect the timing of the stagger ( ex. tl.to('.elements', {duration: 1, stagger: .5, x: 100 } ). For a more in-depth look at what you can do within the stagger property, have a look here 

See the Pen vYBRPbO by GreenSock (@GreenSock) on CodePen

 

Happy tweening!

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