Add new animations to existing section fading effect.

[mocca8]

Hi, I am new to this forum and has just stared to dip my toes into this fantastic toolset.
I made this code: 

See the Pen wvoKGyV by Postbox999 (@Postbox999) on CodePen

 where a line is growing behind  every <h1> tags located in each <section>

As you can tell, these <h1> pseudo element lines with animate/grown separately and will be triggered by the belonging <section> using scrollTrigger.
So far, so good..

 

What I want to achieve, is to add this effect to the <h1> tags in the pre-made code:

See the Pen LYRobjx by RNDL (@RNDL) on CodePen

 as you can tell I have tried to include the h1 pseudo element code to the ""Fading" Section Timeline" code, so that when the section is revealed, the current h1:after will grow (not all h1 tags on the entire page)

I appreciate if someone could please check my code, and point me in the correct direction!

See the Pen ZEBQZjw by Postbox999 (@Postbox999) on CodePen

[ZachSaucier]

Hey mocca8 and welcome to the GreenSock forums.

 

As stated in the CSSRulePlugin docs, we don't really recommend using it. Usually you should use regular elements or animate CSS variables instead. A big reason why is shown in your demo: all of the lines are animated every time. It's better to only animate the relevant line. Plus CSSRulePlugin is by nature slower than regular tweens.

 

One of the issues that you're having is one of the most common ScrollTrigger mistakes: using a general selector ("h1") instead of limiting it to the relevant section(s) (i.e. something like newSection.querySelector("h1")). Same thing for your lines in the bottom JS section.

 

The main issue is also a logical one: In your first demo each .inner section is positioned further down the page. So the start and end positions are different based on their position in the document flow. In the last demo each .inner section is positioned in exactly the same spot due to your absolute positioning. So all of them progress in the exact same way because of that.

 

One way to work around that would be to calculate the start and end positions instead. Something like this:

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

 

However, the demo above still has issues because it's animating all of your lines as I stated previously. I again highly recommend not using CSSRulePlugin for this  

 

Happy tweening!