takachan Posted July 29, 2021 Share Posted July 29, 2021 Good day, I am trying to figure out a way to have the animation run individually by the same class. I read the page about the common mistake on the loop but still couldn't figure it out. I know Im supposed to use the array but code did not run. can someone help me please? See the Pen gOWeerX by jpholic_ty (@jpholic_ty) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted July 29, 2021 Share Posted July 29, 2021 Hey @takachan For anything to work here in the first place, you should load GSAP and ScrollTrigger into your codepen (best via the cog-wheel in the JS section of your codepen - you can even just search for them via the searchbar in that pop-up then). Next up, you have the same ID for multiple elements all over your HTML - that is not valid. You could just change them to classes and adjust your CSS selectors accordingly. Then in your JS you could e.g. create an array with all your wrappers, const items = gsap.utils.toArray('.wrapper') loop over them items.forEach(function(item) { ... }) and inside that forEach loop first set up variables for the elements specific to each wrapper. let line = item.querySelector('.line') let upper = item.querySelector('.upper') let lower = item.querySelector('.lower') After you got those variables set up, use them as the targets in your tweens and also as the trigger-element (with that timeline also being inside of that forEach loop) and you should be golden. Give it a shot and we'll be happy to help you when you get stuck. 6 Link to comment Share on other sites More sharing options...
takachan Posted August 1, 2021 Author Share Posted August 1, 2021 thank you for the reply! Sorry, I am new to Javascript and having trouble understanding. tried my best to do what you mentioned. what Im I doing wrong here? Link to comment Share on other sites More sharing options...
akapowl Posted August 1, 2021 Share Posted August 1, 2021 2 hours ago, takachan said: Sorry, I am new to Javascript and having trouble understanding. It's okay, everybody was new to it at some point. And don't worry, once you get the hang of it, it will become more intuitive every time you use a concept like this. So you have that array of items with the class of wrapper there - good. What you want to do is for each of them to create a ScrollTrigger, right? So you would have to put that creation of the timeline (which has the ScrollTrigger attached) into the forEach loop but after setting up your variables. For the trigger-element of the ScrollTrigger you then set one of your variables or the item of that forEach loop itself. I would suggest maybe using the line. No "", no . - just the variable's name. This will then use the respective line-element of that container, which you just stored in that variable as the trigger-element for this ScrollTrigger. Same concept applies for the tweens you add to the timeline. Since those are supposed to be individual tweens for individual wrappers you also put those inside the forEach loop - after the creation of the timeline of course. Then set your variables as the targets - e.g. tl.from(line, { scaleX: 0, transformOrigin: "right center" }); //instead of tl.from(".line", { scaleX: 0, transformOrigin: "right center" }); 3 Link to comment Share on other sites More sharing options...
takachan Posted August 2, 2021 Author Share Posted August 2, 2021 Quote It's okay, everybody was new to it at some point. And don't worry, once you get the hang of it, it will become more intuitive every time you use a concept like this. Thank you! (T_T) Am I going the right direction here? Tried my best to do what you explained to me here. gsap.registerPlugin(ScrollTrigger); const items = gsap.utils.toArray('.wrapper') var line = gsap.timeline({ scrollTrigger: { trigger: line, start: "center 90%" } }); items.forEach(function(item) { let line = item.querySelector('.line') tl.from(line, { scaleX: 0, transformOrigin: "right center" }); }) items.forEach(function(item) { let upper = item.querySelector('.line') tl.from(upper, { duration: 0.75, y: 30 }, "text"); }) items.forEach(function(item) { let lower = item.querySelector('.line') tl.from(lower, { duration: 0.75, y: -30 }, "text"); }) Link to comment Share on other sites More sharing options...
Solution akapowl Posted August 2, 2021 Solution Share Posted August 2, 2021 What you currently have in your codepen looks a bit better. It is one forEach loop/function that you need to put everything in. const items = gsap.utils.toArray('.wrapper') items.forEach(function(item) { // basically means: for each of my wrappers do the following // get the elements inside this respective wrapper let line = item.querySelector('.line') let upper = item.querySelector('.upper') let lower = item.querySelector('.lower') // create a timeline with a scrollTrigger for this one var tl = gsap.timeline({ scrollTrigger: { trigger: line, start: "center 90%" } }); // add these tweens on the specific elements you before stored in those variables to the tl tl.from(line, { scaleX: 0, transformOrigin: "right center" }); tl.from(upper, { duration: 0.75, y: 30 }, "text"); tl.from(lower, { duration: 0.75, y: -30 }, "text"); }) 3 Link to comment Share on other sites More sharing options...
takachan Posted August 12, 2021 Author Share Posted August 12, 2021 Thank you so much, it work wonders! I was able to understand the process. I hope to become like you one day! Thank you again for your patience! 2 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