scrolltrigger ScrollTrigger in ScrollTrigger (containerAnimation) HELP, and some other aspects

[Alex Raldugin]

Hello, community and its gurus.

 

I kindly ask for help with some aspects of using ScrollTrigger, namely (containerAnimation), as well as a few other questions. I have a page with pinned horizontal scroll sections and three slides in it (in my example, 100dvw wide). Each slide has its own internal animation.

 

I create step-by-step animation using a timeline with .to(element, {props…})

 

When the horizontal scroll container is pinned, I animate the mask (cliPath) on the first slide. When it's finished, I move on to the second slide (moving the container to the left by -window.innerWidth, animating the contents of the second slide), and when that's done, I move on to the third slide (moving the container to the left by -window.innerWidth * 2), where I want to have an animation for images in carousel container.

During initialization, I use gsap.set to set the positions of the carousel behind the right border of the third slide (dashed by green line), and I want to scroll this carousel of images from left to right inside this slide...

 

 

I attached ScrollTrigger to each element (image) of the carousel so that when each element passes a certain position in the viewport, it does something (move y: -50 in this example). This action is fired before I saw this carousel. And my scenario doesn't work. I don't understand why this is not working. And, by the way, I don't see markers, although this option is enabled (markers: true).

I also have some additional questions:

How to correctly calculate the end position (end: ...) of ScrollTrigger for horizontal scrolling with slides, if there is animation inside the slides in addition to scrolling from right to left (the length of the horizontal scroll)? Is it by adding up the length of all animations?

Is there any way to temporarily disable scrolling (for example, if I need to open a popup with an enlarged image), and then, when closing this popup, enable scrolling for the continuation of GSAP animation?
When animating masks (on the second slide), there is some shaking of the images, and I don't understand what it is.

Thank you very much for your great product, which opens up great possibilities for visual communications.

See the Pen abRzOoz by cuyufmii-the-looper (@cuyufmii-the-looper) on CodePen

[Cassie]

Hi there Alex!

 

So containerAnimation's calculations are based on the horizontal scroll tween being set up like this

let scrollTween = gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  duration: 6,
  scrollTrigger: {
    trigger: ".scroll",
    pin: true,
    scrub: true,
    markers: true,
    end: `+=${container.offsetWidth}`
  }
});

Note that the tween only controls the horizontal scroll and the ease is linear.

 

The way yours is set up won't allow for correct calculations. So if I were you I would just add all the animations to a timeline, much in the same way you've done with the masks, move the mask, then move the container, then animate the images in carousel container.

 

 

Quote

Is there any way to temporarily disable scrolling (for example, if I need to open a popup with an enlarged image), and then, when closing this popup, enable scrolling for the continuation of GSAP animation?

Looks like you're using locomotive, here's some info on that! - https://github.com/locomotivemtl/locomotive-scroll/issues/193

 

Quote

When animating masks (on the second slide), there is some shaking of the images, and I don't understand what it is.

I can't see this - can you provide more info about browser/OS/how to reproduce?

Chat soon!

[Alex Raldugin]

Many thanks for your response!
Try to do it based on your advice.
But I think about this concept AKA stop panel 

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