ScrollTrigger: trigger position and CSS translate

[acg]

I'm confused about how the "start" (or "end")) property defines the exact position when CSS "transforms" are applied to the target.

 

Specifically, I have an element that has a transformY applied and I'm using " start:'top 75%' " in my ScrollTrigger options. But when I show the debug markers, the "start" marker shows up somewhere in between the "transformed" Y position and the "untransformed" Y position.

 

What I'm specifically trying to do is create a "slide on from above" effect for an element similar to what you would get using the WOW or AOS JS libraries. The element is initially positioned "above" the final position by way of CSS translateY and I use GSAP to animate translateY from some offset value to 0. I want to trigger this slide animation when the untransformed position comes into view. But, for some reason ScrollTrigger shows the "start" marker at some position between the transformed (start) position and the untransformed (final) position.

 

So, what strategy can I use to set the "start" marker to be relative to the final, untransformed position?

 

FWIW, if my effect is a "horizontal" slide (where I'm animating translateX instead), things work perfectly. The "start" marker is shown at the top of the element. So, this issue has something to do with ScrollTrigger and elements transformed with translateY.

 

Thanks for any help or advice!

[acg]

Here is a simple pen which generally shows the issue. On startup/refresh, notice the "start marker" is at the Y location of the translated box. When you scroll, the box will animate to the desired final position. After the box animates, if you adjust the browser size (to force ScrollTrigger to update), the "start marker" will actually change to the final position.

 

So, it is clear that the "start" marker is set to the transformed position of the target. 

 

See the Pen MWewaPg by acgresearch (@acgresearch) on CodePen

 

So, what would be a good strategy to accomplish my goal of creating this "slide" effect where the item moves vertically, yet is triggered by the *final* position of the element?

 

Thanks again for any advice.

 

[ZachSaucier]

Hey acg. Thanks for the demo
 

On 10/10/2020 at 1:35 PM, acg said:

The element is initially positioned "above" the final position by way of CSS translateY and I use GSAP to animate translateY from some offset value to 0.

This is one issue. Not setting all transforms with GSAP on elements that you're animating is one of the most common GSAP mistakes. 

 

But in general when using y transforms and ScrollTrigger it's best to use different elements for the trigger and for the y transforms. This in some situations people would want the effect in your demo as opposed to what you want. With a simple container added and used:

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

 

Additionally you don't need to explicitly use the CSSPlugin (GSAP does that for DOM elements automatically) and we recommend using the y property instead of translateY.

[acg]

Thank you for the tip on avoiding CSS transforms. I was not aware of the big difference and have converted my code over to the preferred way.

 

Yesterday I had also thought of the "container" concept as well, so I added that concept to my code. It is a bit more complicated than it first appears. Since I'm creating a general library, you have to check whether you've already created the container (in case content is changed or added dynamically and you need to "refresh"). And you also probably have to use "inline-block" since the content may not be a block level element that is being animated (but inline-blocks have their own weird padding side-effects). And you have to pay attention to the "position" of the element since you probably don't want to add a container to "absolute" positioned elements.

 

Thanks for confirming that adding a container element is likely the best strategy.

 

[ZachSaucier]

6 minutes ago, acg said:

It is a bit more complicated than it first appears.

We know the feeling  We have to do detection like that in GSAP, especially related to pinning with ScrollTrigger.