ScrollTrigger not working with 2 timelines

[Pedromacrobiiz 0 Likes (Newbie)]

Hello, i was re-creating a scrollTrigger action that i saw people using as basic example, just like a fade-in from the left.
I was using this on a production project and i wanted to recreate this scrollTrigger but when i create a timeline it indeed works, but when i try to add another timeline for example let timeline2 = gsap.timeline it stops working.
I also tried the basic .to with start and end but it doesnt "stick" to the top of the section i'm working on but the middle section of another section.
They both animate at the first start marker.

Here's the code.

<script>

gsap.timeline({

  scrollTrigger: {

    trigger: '.LinhaDeApoio', // This is the Section Class

    start:"center",

    end: "bottom top",

    markers:true

  } 

 

})

.from(".DivImagemApoio", {x:-200, opacity:0, duration:2})  // div class i want to animate

 

let var1 = gsap.timeline({

  scrollTrigger: {

    trigger: '.Newsletter', // This is the Section Class

    start:"center bottom",

    end: "bottom top",

    markers:true

 

  } 

 

})

var1.from(".leftcontainnews", {x:-200, opacity:0,duration:3}) // div class i want to animate

 

</script>

[GreenSock 18,876 Likes (Superhero)]

It should be no problem at all to have multiple ScrollTriggers. It's pretty much impossible for us to troubleshoot without seeing the issue in context, though, so would you mind providing a minimal demo please? I suspect there's a problem with your HTML or CSS or something unrelated to ScrollTrigger, but I'm not sure. 

 

It's best if you don't just post your whole web page - just try to recreate the issue in the simplest possible CodePen that you can. That'll give you the best chances of getting a prompt and accurate answer. 👍

[Pedromacrobiiz 0 Likes (Newbie)]

27 minutes ago, GreenSock said:

It should be no problem at all to have multiple ScrollTriggers. It's pretty much impossible for us to troubleshoot without seeing the issue in context, though, so would you mind providing a minimal demo please? I suspect there's a problem with your HTML or CSS or something unrelated to ScrollTrigger, but I'm not sure. 

 

It's best if you don't just post your whole web page - just try to recreate the issue in the simplest possible CodePen that you can. That'll give you the best chances of getting a prompt and accurate answer. 👍

Hello!
Here's the codepen. It has both section css and html.
Thank you! 

See the Pen OJWvPex by pedromeneses198 (@pedromeneses198) on CodePen

[GreenSock 18,876 Likes (Superhero)]

I noticed a bunch of problems:

1. You had typos, like ".LinhaDeApoio" instead of ".LinhadeApoio"
2. You had an invalid "start" value. It's supposed to have two parts, but you only had start: "center" Did you mean start: "center center"? I'm not really sure.
3. You had lazy-loading images with no height defined, thus they shifted the layout around after ScrollTrigger had done all its refresh() calculations. You should either define sizing so that it doesn't shift things around, or call ScrollTrigger.refresh() after your layout is done with all the lazy-loading stuff (or whatever)

I assume you wanted something more like this?: 

See the Pen c0afe4c5991e3fc49448f959044b849e by GreenSock (@GreenSock) on CodePen

[Pedromacrobiiz 0 Likes (Newbie)]

11 hours ago, GreenSock said:

I noticed a bunch of problems:

1. You had typos, like ".LinhaDeApoio" instead of ".LinhadeApoio"
2. You had an invalid "start" value. It's supposed to have two parts, but you only had start: "center" Did you mean start: "center center"? I'm not really sure.
3. You had lazy-loading images with no height defined, thus they shifted the layout around after ScrollTrigger had done all its refresh() calculations. You should either define sizing so that it doesn't shift things around, or call ScrollTrigger.refresh() after your layout is done with all the lazy-loading stuff (or whatever)

I assume you wanted something more like this?: 

 

 

This is the effect i was looking for. Thank you !