Creating an animation, and applying it to other elements

[kprkr]

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?

[akapowl]

Hey @kprkr

 

Sounds to me, like you might be looking for something like gsap.effects ?

[Carl]

More on GreenSock effects

 

 

See the Pen LYNBZww by snorkltv (@snorkltv) on CodePen

 

 

[kprkr]

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.