takachan Posted October 14, 2021 Share Posted October 14, 2021 Good day, I am fairy new to javascript and having difficulties figuring out how to create a multiple scroll trigger. I have found the perfect codepen, and what I want to do is to use this for multiple sections of my webpage to work individually. but currently, if I use it as it is, it applies to the whole section. I have tired to edit it, but sadly I did not have enough skill to make it to work on multiple section. The only thing I know what I must do is to, change the id to class for both html and js... Any help is appreciated. heres what I have done so far: See the Pen GRvpoYE by jpholic_ty (@jpholic_ty) on CodePen original See the Pen qBrJENy by ooblek (@ooblek) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted October 14, 2021 Share Posted October 14, 2021 Hey there! This is a really common hurdle. In fact we outline it in our 'common ScrollTrigger Mistakes' article. You're looking for a loop 👀 Link to comment Share on other sites More sharing options...
takachan Posted October 21, 2021 Author Share Posted October 21, 2021 thank you for the reply, I have read the article and tested the codepen. as i mentioned above I have no experience with javascript but I did my best. Could you tell me what I am doing wrong here? const texts = gsap.utils.toArray('.scrollingText'); texts.forEach(text => { gsap.to(text, { x:1000, duration:50, repeat:-1, ease:'linear', scrollTrigger: { trigger: text, } }) }); gsap.utils.toArray('.scrollingText'); texts.forEach(text => { gsap.to(text, { xPercent:15, scrollTrigger:{ trigger:".scrollingText", scrub:1, scrollTrigger: { trigger: text, scrub: true } } }); Link to comment Share on other sites More sharing options...
Solution OSUblake Posted October 21, 2021 Solution Share Posted October 21, 2021 Looks like you have syntax problems there, like nesting a scrollTrigger object inside another scrollTrigger object. Perhaps you meant something like this. const texts = gsap.utils.toArray('.scrollingText'); texts.forEach(text => { gsap.to(text, { x:1000, duration:50, repeat:-1, ease:'linear', scrollTrigger: { trigger: text, } }); gsap.to(text, { xPercent:15, scrollTrigger: { trigger: text, scrub: true } }); }); 4 Link to comment Share on other sites More sharing options...
takachan Posted October 21, 2021 Author Share Posted October 21, 2021 Thank you so much! It works wanders! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now