tallulahh Posted April 24, 2021 Share Posted April 24, 2021 Hello! I have been researching into timeline organisation as I have a lot of animation on my current project. I have read that animations should be put into their own functions and then added to the master timeline, cleaning up the code a lot. However my question is specifically about a scrolltrigger animation that I am repeating, as the trigger and the target/selector are different, however the rest of the code stays the same. Any recommendations? gsap.from(".about .char", { scrollTrigger: { trigger: ".about", start: "top-=50 80%", end: "+=100", scrub: 1, toggleActions: "play none reverse reset" }, rotation: 180, transformOrigin: "50% 100%", opacity: 0, duration: 0.5 }); Link to comment Share on other sites More sharing options...
tallulahh Posted April 24, 2021 Author Share Posted April 24, 2021 Similarly I have created scrollTriggers like this, adding previously created animations: Quote ScrollTrigger.create({ trigger: ".hello", start: "top top", end: "+=1000px", scrub: true, animation: colorToBlue }); However I am also repeating this code a few times.. is there any way around this? Link to comment Share on other sites More sharing options...
akapowl Posted April 24, 2021 Share Posted April 24, 2021 Hello there @tallulahh. In the end, how to best organize your code really depends on what exactly your whole setup looks like. So giving recommendations based on your code snippets here would not neccessarily mean it will work 100% for you. What you could likely do though, is e.g. add a certain class to all those elements you want to animate in that certain way, put them in an array based on that class, loop over them and forEach create that certain ScrollTrigger. This way you can create whole systems with logic to your liking. Like in this following example all the elements with the class '.animatable' will be animated in the same way, but with different triggers. See the Pen ef9beb992b8aa9761073f393a2a91426 by akapowl (@akapowl) on CodePen First I check if the animatable element has a data-trigger attribute; if it doesn't, the trigger will fall back to the parent element in the end (the section it is in here). If it does have such an attribute, I check if that atrribute is "self" - in that case the element itself will be the trigger - if it isn't it will be whatever element inside that section has the class the data-attribute is set to. Here is that same example toned down to simply just always use the parent-element as the trigger ( if maybe the example above was too confusing) See the Pen d341b5f6dbea69ffb1e02f07fda41344 by akapowl (@akapowl) on CodePen On a sidenote: Using toggleActions alongside scrub in your ScrollTriggers won't have any special effect - either use one or the other. If you have both set to a ScrollTrigger, it will always be the scrub taking control over the animation. Also, maybe this article on how to write animation code efficiently by @ZachSaucier might be helpful. Hope this helps a bit. Cheers, Paul 1 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