timeline with scroll trigger

[luisv01]

Hi, I am  having some problems with scrollTrigger, I am trying to create a timeline wich is going to  trigger when a section  gets into the viewport and is going to animate some content wich is inside that section, such as headings and texts, the problem comes when I try to repeat my classes, all the sections are going to have the same class( I know for doing this I shoud use something like gsap.utils.toArray() and loop through the sections) but, what about the content inside the sections wich I want to animate? should I use different classes to each heading and text? or is there a better approach?

 

I am going adjunt a codepen of what I tried to do. Thank you so much.

See the Pen PomVyBJ by luisv01 (@luisv01) on CodePen.

[Carl]

Welcome to the forums

 

Thanks for the demo.

 

You were pretty close. The biggest thing to fix is that you need to find the title and text in each section.

Notice how I use querySelector on each section in the the loop

 

See the Pen BaRMGNV?editors=1010 by snorkltv (@snorkltv) on CodePen.

 

My course ScrollTrigger Express has a video explaining exactly how to approach this type of project.

Here is a demo I use to teach this approach

 

See the Pen b0b8e9c4a880b97379630f2ab9561407 by snorkltv (@snorkltv) on CodePen.

 

Learn more about ScrollTrigger Express

[luisv01]

11 hours ago, Carl said:

Welcome to the forums

 

Thanks for the demo.

 

You were pretty close. The biggest thing to fix is that you need to find the title and text in each section.

Notice how I use querySelector on each section in the the loop

 

 

 

 

My course ScrollTrigger Express has a video explaining exactly how to approach this type of project.

Here is a demo I use to teach this approach

 

 

 

 

Learn more about ScrollTrigger Express

Thank you so much Carl. It solved my problem. I check out your course. have a nice day!