Nickicool Posted August 25, 2020 Share Posted August 25, 2020 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: What am I doing wrong, how do I do it right? 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 Link to comment Share on other sites More sharing options...
OSUblake Posted August 25, 2020 Share Posted August 25, 2020 CSS rule affects everything. It's better to use css variables. See the Pen 1ef7be6e2e8a05a35ee1cbaaaede34b7 by osublake (@osublake) on CodePen 5 Link to comment Share on other sites More sharing options...
OSUblake Posted August 25, 2020 Share Posted August 25, 2020 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 2 Link to comment Share on other sites More sharing options...
Nickicool Posted August 25, 2020 Author Share Posted August 25, 2020 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! Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 25, 2020 Share Posted August 25, 2020 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. Link to comment Share on other sites More sharing options...
Nickicool Posted August 25, 2020 Author Share Posted August 25, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 25, 2020 Share Posted August 25, 2020 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. 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