[GSAP - Scrolltrigger - Multiple Background Text Animation]

Thank you so much! 

It works wanders! 

[GSAP - Scrolltrigger - Multiple Background Text Animation]

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

 

[GSAP - Scrolltrigger - Multiple Background Text Animation]

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

[[HELP] Scrolltrigger Text Animation with the same class]

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!

 

[[HELP] Scrolltrigger Text Animation with the same class]

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

 

[[HELP] Scrolltrigger Text Animation with the same class]

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?  

 

 

 

[[HELP] Scrolltrigger Text Animation with the same class]

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

[[HELP] GSAP Scrolltrigger Text Animation]

Thank You!! Got everything to work as I wanted. 

[[HELP] GSAP Scrolltrigger Text Animation]

oh wow thank you! just what I wanted!

now i just need to figure out a way to have the animation not on repeat... 

[[HELP] GSAP Scrolltrigger Text Animation]

Good day, 

 

I want to create a text reveal animation as shown on the codepen as a scrolltrigger.

To have the animation starts when the trigger reached the middle of the screen when scrolled.

Can someone help me?  

 

 

See the Pen EMOwaO by PointC (@PointC) on CodePen