Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Performance question. Is this ok?

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

Share this post

Link to post
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

Share this post

Link to post
Share on other sites

Thanks a lot!! I didn't know the stagger syntax had changed :)🕺🕺

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.