Jump to content
Search Community

[HELP] Scrolltrigger Text Animation with the same class

takachan test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

 

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.

 

  • Like 6
Link to comment
Share on other sites

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" });

 

 

 

 

  • Like 3
Link to comment
Share on other sites

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

  • Solution

 

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");

})

 

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

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