t.marty Posted November 22, 2019 Share Posted November 22, 2019 Hello Everyone I try to setup a structured way of my animations using functions. Now my master timeline is called by init() and as you can see it has the paused: true parameter. As you can see this is ignored and timeline starts as soon as the init function is called. Why is this? Here is also a Pen on GSAP 2: See the Pen GRRLjwe by Dollique (@Dollique) on CodePen See the Pen abbxBBj by Dollique (@Dollique) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted November 22, 2019 Share Posted November 22, 2019 You're making the same mistake here. I don't know what you're trying to do here. If you're trying to add the animation from your baseAnimation function to your master timeline, then you would need to return it. function init() { var tl = gsap.timeline({ paused: true }) .add(baseAnimation()); return tl; } function baseAnimation() { console.log("started"); return gsap.timeline() .to(".test",{y:20},"+=1"); } If you're trying to call your baseAnimation function when the timeline plays, and NOT add it to the master timeline, then you need to remove the (). function init() { var tl = gsap.timeline({ paused: true }) .add(baseAnimation); return tl; } 1 Link to comment Share on other sites More sharing options...
OSUblake Posted November 22, 2019 Share Posted November 22, 2019 Please see the concepts used in this article. They will work the same for v3. https://css-tricks.com/writing-smarter-animation-code/ 4 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