Does ScrollTrigger work in a small wrapper?

[shunyadezain]

Hi everyone,

 

I want to use ScrollTrigger to trigger some elements when the red box reach to the top of screen (or the top of the wrapper ). But the marker(start) doesn't move if you scroll in the wrapper.

Is there a way to trigger animation in the wrapper?

 

The box is just for the demo and I want it back to the original shape when the red box pass the end point.

 

Thank you.

See the Pen OJRREOJ by shunyadezain (@shunyadezain) on CodePen

[ZachSaucier]

If you need to apply a ScrollTrigger based on an element other than the body you just need to specify the scroller in the ScrollTrigger:

scroller: ".wrapper",

If you want it to be relative to the viewport and you have it within another element with a scroller you'll have to manually offset the start position by calculating how much if should be offset by and adding that in.

[shunyadezain]

@zachSaucier Thank you for your quick response!  It works and I'm glad to ask you a question here!