eomerb Posted January 2, 2020 Share Posted January 2, 2020 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 More sharing options...
Shaun Gorneau Posted January 2, 2020 Share Posted January 2, 2020 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! 2 Link to comment Share on other sites More sharing options...
eomerb Posted January 3, 2020 Author Share Posted January 3, 2020 @Shaun Gorneau I used onComplete in each but I got nothing probably because of wrong use of syntax works great now thanks a lot. 1 Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted January 3, 2020 Share Posted January 3, 2020 You’re welcome, @eomerb! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now