Jump to content
GreenSock

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

How to fix the animation of pseudo elements and to optimize the performance of the code?

Recommended Posts

Trying to create my first animation on GSAP. But there is a problem... If you scroll the page, the animation of pseudo elements is played incorrectly - they react all at once, and as many times as the number of elements. Moreover, the container with the text and the container with the SVG icon are animated correctly - each at the time when it appears on the screen.

I have 2 questions:

  1. What am I doing wrong, how do I do it right?
  2. And how can I optimize this example in terms of performance, given that everyone has the same scrollTarget.

 

 

See the Pen zYqZEYZ?__cf_chl_jschl_tk__=70345f77e75071942f0b852760b6275261296917-1598379171-0-ATNiJruMI5o8mRZpd7Dz4prIuLbPo71p9FzVcvyYshTKUJwj-pzeAhrbupvWZzHnPJ6yzEVeMzkUq347mkPC5j360rEmc9VnDP8yPPLU7C46JGXnxPHI1k4_Dgxa_CcWQd8SWwv74Yz4 by nickicool (@nickicool) on CodePen

Share this post


Link to post
Share on other sites
15 minutes ago, Nickicool said:

And how can I optimize this example in terms of performance, given that everyone has the same scrollTarget.

 

Use a timeline.

 

And zoom is not standard. Use scale.

https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

 

 

  • Like 2

Share this post


Link to post
Share on other sites
6 minutes ago, OSUblake said:

Use a timeline.

I tried earlier using Timeline, but it didn't work out at all. To show the result I make changes to the start Codepen (because I don't know how to insert a new one in the response):

  • The animation stops working for the individual completely - all .item behaves as a single unit.
  • Delay no longer works for pseudo elements - they are triggered immediately, but rather with a small delay (Yes, for .data-wrapper works well).

Please help with the correct Timeline... This is my first animation.

 

And about CSS vars - in my region, only 80% of the browser supports. I need a different solution... Is it possible to solve this if each .item has an additional unique class, such as .icon_x (where x is the ordinal number)? And in TImeline code use some like this .to(CSSRulePlugin.getRule("#js-traits-list .icon-1:before")?

 

 

6 minutes ago, OSUblake said:

And zoom is not standard. Use scale.

https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

Thanks for the great tips!

Share this post


Link to post
Share on other sites
7 minutes ago, Nickicool said:

I don't know how to insert a new one in the response

Just include the link. It will auto-embed :) It's preferable to do so (using a fork of the original demo) so that context isn't lost in these forums.

 

7 minutes ago, Nickicool said:

Is it possible to solve this if each .item has an additional unique class, such as .icon_x (where x is the ordinal number)? And in TImeline code use some like this .to(CSSRulePlugin.getRule("#js-traits-list .icon-1:before")?

Nope. The only alternative is to use real elements instead of pseudo-elements. 

Share this post


Link to post
Share on other sites
58 minutes ago, ZachSaucier said:

Nope. The only alternative is to use real elements instead of pseudo-elements. 

Well. I think I'll give up the pseudo elements for now and replace them with real ones. This is not a problem. But I don't understand what my error is using Timeline... Why are all the elements shown at once when scrolling, and not as they appear?

Share this post


Link to post
Share on other sites

Please make a minimal demo of the issue (not animating pseudo-elements) and include it here if you'd like us to help you debug.

Share this post


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

×