Set Y postion with a .to

[IndM]

I thought this would be something simple that I could make, but instant running into a issue 😛
Not clearly know what I'm doing wrong here, what I want is the initial position y to be set at 150, so it would slide up onEnter.

When I do this, the original triggers are being placed at the set position. So in my case (not the demo) it would be a lot off due the end trigger is being triggerd a lot later than the end of the text.

See the Pen qByoXXR by indy-meermans (@indy-meermans) on CodePen

[alig01]

Hey, 

 

create a parent element so you could use it as a trigger and animate the children like you want.

 

You've followed this approach in this post:

You used the parent (section) as the trigger and animated its children (".slide", ".o2lab__col").

 

Additionally, you could also add overflow: hidden to the parent to improve the effect.

Also be aware of fouc (Flash of Unstyled Content).

 

Hope this helps and good luck with your project.

[IndM]

Hey!

This won't work in my case, the triggers needs to be triggered when the text is hit. I use a wysiwyg so there could be different animations for each text in it.

[Carl]

Yup, @alig01 is exactly right. The trigger elements should not be what you are animating especially along the y axis. Their positioning is crucial for ScrollTrigger to get proper measurements. Perhaps you can run a script that wraps your text in wrapper divs (to be used as triggers)  PRIOR to ScrollTrigger running.