Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
takachan

GSAP - Scrolltrigger - Multiple Background Text Animation

Go to solution Solved by OSUblake,

Recommended Posts

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

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

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

  • Solution

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

 

  • Like 3
Link to comment
Share on other sites

Thank you so much! 

It works wanders! 

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