Multiple scrolltriggers in one section

[Meetallo]

Hi,

I have a 100vh section with an image inside and I need to change the source of that image based on scroll four times (4 different images in total with the first one). The animation has to start at the center of the section and end at the bottom with no scrub, one animation after the other. I have issues calculating the start and the end of the triggers, they have to be in the second half of the section and that half section must be divided in 4. That was my solution. But it does not work.

 

Any advice?

 

Thank you

[OSUblake]

Welcome to the forums @Meetallo

 

If you need help, please provide a minimal demo that shows the issue. Thanks!

 

[Meetallo]

Hi @OSUblake,

I'm sorry here it is, 

See the Pen KKZWGxW by Meetallo (@Meetallo) on CodePen

. This example looks different from my first test. However, when I scroll to the middle section (that should be pinned) and reach the center of the section I need to change the source of the image four times (4 images in total with the first one already visible). So from the center of the section to the bottom it has to change from the first to the last and back if scrolling backwards. Please tell me if that's not clear enough. Thank you so much.

[Cassie]

Heya!

 

A timeline will make this a lot easier! Here you go -

See the Pen PoEOpWq?editors=0010 by GreenSock (@GreenSock) on CodePen

You can use the position parameter to change the timings on the timeline too. Hope this helps
 

 

[Meetallo]

Hi @Cassie,

Thank you that's pretty close to what I wanted to achieve. Is it possible to add fade in and out to every image? Without using the scrub parameter in the scrolltrigger. Like you scroll and the first animation (first image fading out and second fading in) starts and stop, until you scroll again and the second animation (second image fading out and third fading in) starts and stop without seeking the scroll. Hope I was clear enough.

Thank you

[OSUblake]

You can't fade images if you're only using 1 image. You'd need to absolute position all the images on top of each other, and set stuff up so it fades the other images out while fading the current one in. For no scrubbing, you'd have to set it up with different triggers or maybe do something like this...

 

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

 

 

 

[Meetallo]

Hi @OSUblake,

Thank you, I tried to adapt your example to my needs but it's a little bit complex. Could you please show me your solution on the example of Cassie? Thank you

[Cassie]

Hey @Meetallo, Why don't you give it a go?

Position all the images on top of each other with position:absolute then instead of changing the src, change the opacity.

Something like this. Pop back with a minimal demo if you get stuck implementing this.

 

Good luck!
 

gsap.registerPlugin(ScrollTrigger);

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".section",
    scrub: true,
    start: 'top top',
    end: 'bottom top',
    markers: true,
    pin: true,
  }
});

tl.to(".image4", {
  opacity: 0
},"+=1")
tl.to(".image3", {
  opacity: 0
},"+=1")
tl.to(".image2", {
  opacity: 0
},"+=1")
tl.to(".image1", {
  opacity: 0
},"+=1")

Resources

 

[Meetallo]

Hi @Cassie,

I can arrive here, don't know ho to achieve this animation without scrub enabled (and if you see the first fade it's not right). 

See the Pen KKZWGxW by Meetallo (@Meetallo) on CodePen

[PointC]

If I understand your goal correctly, I don't think you'd want to fade out the 1st image. That's why that part doesn't work correctly. You could skip that one in the forEach() loop like this. I've also disabled scrubbing so the timeline just runs at normal speed unrelated to the scroll. You can simply adjust the duration of each tween and the position parameter to your liking. Happy tweening.

 

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

 

[Meetallo]

Hi @PointC,

The animations don't have to be automatic one after the other. It's more like based on the scrolling but when I reach the first trigger the first animation starts and finish, then after another scrolling and reaching the second trigger the second animation starts and so on.

 

 

[OSUblake]

Here's a way to calculate the triggers and use callbacks to do the fading.

 

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

 

 

[Meetallo]

@OSUblake that's perfect!!! Thank you!!!