ScrollTrigger targeting sections and then text

[agsymonds]

Hi,

 

I have repeating section using the same classes, but with different content (backgrounds and copy). I want the background to appear on scroll, and then for the text to also appear, maybe +1 seconds after the background appears. 

 

I have managed to use "gsap.utils.toArray('.section');" for the sections which are triggered on scroll and they work well. If I want do the same for text within each section, do I need to repeat the array process adding a different trigger to target the text class to trigger for each instance or is there a simpler way?

 

TIA

See the Pen BaqrVgg by agsymonds (@agsymonds) on CodePen

[PointC]

You're part way there. Good job.  

 

You'll want to create a timeline for each section and animate the .text class from opacity:0 after the box fades into view. Something like this should work. 

 

See the Pen 56deefd4eca5c79818393d4635661fdb by PointC (@PointC) on CodePen

 

Happy tweening and thanks for being a Club member..

 

[agsymonds]

Thanks, this looks like what I need! Greatly appreciate the support.

[agsymonds]

Hi, if I add more than one <p> element to each section, only the first <p> element is affected by the .from and not both <p>, although both have the same class.

 

 

I could wrap all <p> elements in a div and target that div, but I assume that there is a simpler way to target each individual <p> element?

[Cassie]

Hi there,

 

You're using querySelector() here which selects the first element. You can use querySelectorAll() if you want to select all of them.

 

Hope this helps!

[agsymonds]

Thank you!