Jump to content
Search Community

Performance question. Is this ok?

chairman test
Moderator Tag

Recommended Posts

Hi guys,

Since I'm fairly new to javascript, I just want your opinion about my solution. Is it ok to do like this?

I am trying to not make a too many intersection observers. Therefore I create the timelines based on the class names of the parent div's.

Is it a performance killer? 

Hope this makes sense. :) 

See the Pen PooyGaK by ekkaks (@ekkaks) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey chairman,

 

Your code looks pretty good! I have nothing to improve about your overall approach - nice work!

 

The only things that I recommend changing:

  • staggerTo is unnecessary in GSAP 3 - all tweens can now stagger! So I'd switch those to regular .to() calls. 
  • I'd probably use .fromTos instead of a .set() and .to() call in the first and third if statements. They're pretty equivalent, but that way you know for sure that they are intertwined. It also has the benefit of saving you some code.
  • Lastly, if this were all the animation that you were going to have and you don't need sequencing help and you don't need control over the animation later (i.e. to .reverse() it or something like that) I might not use a timeline. You can just use gsap.fromTo() and gsap.to() and that will save you a tiny (probably negligible) bit of processing time. I realize that these animations are probably stand ins for more complex ones where using a timeline can be helpful, especially for sequencing, so I left them in there for now.

See the Pen wvvYXgE?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 4
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...