using scrolltrigger inside a div

[archimedo]

Hi everyone,

I've been having some troubles trying to use scrolltrigger effect inside a scrollable div. I would like to animate the two pictures at the bottom of text when, while scrolling, the bottom of their cointainer div hit the bottom of the viewport. Unfortunately the code I wrote doesn't seem to work, I was wondering if that's because I am scrolling inside a div rather than the body but I couldn't find out yet.

Can you help me understand what I'm doing wrong?

Thank you!

See the Pen dyXjEPq by archemede (@archemede) on CodePen

[ZachSaucier]

Hey archimedo. A few issues:

1. ScrollTrigger inside of vars should be scrollTrigger.
2. When you want to use a different element as the scroller you need to specify that inside of the ScrollTrigger vars. In your case the .box element is the scroller.
3. You misspelled .images-container as .image-container in your CSS.

I might also recommend using GSAP's defaults, depending on your actual tweens. Altogether:

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

[archimedo]

Thank you so much for your help!!

[archimedo]

is there a way to reverse the animation when scrolling up again?

[ZachSaucier]

15 hours ago, archimedo said:

is there a way to reverse the animation when scrolling up again?

Sure. That's what toggleActions are for. Maybe toggleActions: "play none none reverse" is what you want?

[archimedo]

Thank you so much!