Jump to content
GreenSock

s-jay

loop through text for each section

Recommended Posts

hello everyone,

i have created this codepen to swap text in the sticky box for each sections.

and used scrollTrigger for each.

if possible i`d like to know how to use one scrollTrigger and loop though both sections and texts.

thank you.

 

See the Pen QWmRVvO by sj-jay (@sj-jay) on CodePen

Link to comment
Share on other sites

Do you mean "how can I reduce my code to use just a loop instead of writing it out for each section"?

 

This is not really a GSAP question, but more basic Javascript. I would write a .forEach() loop and and instead of hard coding element dynamically set them. I've set a data attr to the text elements to be the same with the ID of the section, but you could also just use the index of the elements.

 

See the Pen ZExNmOB?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

You could also write one big timeline and animate all the elements on the timeline. If you want that I would suggest removing ScrollTrigger, build out the whole animation and only when you're happy with the animation add ScrollTrigger back in. 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@mvaneijgenThank you so much...

i`m still new to Javascript.

this is exactly what i was looking for.

 

 

  • 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.
×