Jump to content
Search Community

timeline with scroll trigger

luisv01 test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 6
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
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.
×
×
  • Create New...