kprkr Posted July 27, 2021 Share Posted July 27, 2021 Hi all, this is more of a question on how to better manage my code and not repeat myself too often. So, right now I am noticing I have maybe 20 elements being animated like so; tl.from('.example', 1, { opacity:0) .from('.example1', 1, { opacity:0) .from('.example25', 1, { opacity:0) .from('.example992', 1, { opacity:0) .from('.example372', 1, { opacity:0) They are usually more complex (timing, opacity, skew, X, etc) and, as I go through and tweek anything, I am having to go and replace my 20 objects in my timeline. What would be the best case for just create one, and then applying it to each of my ".example" elements? My use case just for context, is to apply a similar/the same animation to multiple Headers, images and paragraphs throughout the site, which can get quite messy and a lot of repeating. However, I cannot just select all/loop through all <p> as I may not want to it apply to all... I guess my question is, is there some sort of way similar to how I may create a @mixin and @include it for css, but GSAP and its timeline logic? Link to comment Share on other sites More sharing options...
akapowl Posted July 27, 2021 Share Posted July 27, 2021 Hey @kprkr Sounds to me, like you might be looking for something like gsap.effects ? 3 Link to comment Share on other sites More sharing options...
Carl Posted July 27, 2021 Share Posted July 27, 2021 More on GreenSock effects See the Pen LYNBZww by snorkltv (@snorkltv) on CodePen 5 1 Link to comment Share on other sites More sharing options...
kprkr Posted July 29, 2021 Author Share Posted July 29, 2021 Yes perfect, thanks all! I knew there would be something but I just could not figure out what it would be called/where to look. 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