scrollTrigger dislocation on horizontal scroll section with pause

[Yank]

I'm trying to build a horizontal scrolling page including some paused sections, but after I added other animations triggered by scrollTrigger, I found that the trigger position has shifted. This is an example based on the official demo, where you can see the position of the marker moved while scrolling

See the Pen RwBmgqP by yankai17148 (@yankai17148) on CodePen

[Cassie]

Hiya!

 

You can't add any animations to that timeline - it's set up specifically to allow for 'containerAnimation'

Please watch this video
 

 

[Yank]

12 hours ago, Cassie said:

Hiya!

 

You can't add any animations to that timeline - it's set up specifically to allow for 'containerAnimation'

Please watch this video
 

 

Hi! Thanks for the answer, yes, I used "containerAnimation" in the scrollTrigger of ".one p" to link the horizontal scrolling timeline, the animation can be triggered, but the trigger position is wrong, how can I fix it?

[GSAP Helper]

25 minutes ago, Yank said:

Hi! Thanks for the answer, yes, I used "containerAnimation" in the scrollTrigger of ".one p" to link the horizontal scrolling timeline, the animation can be triggered, but the trigger position is wrong, how can I fix it?

 

Comments like 'the trigger position is wrong' is rather difficult for people to help with. Can you be more specific about exactly what you expect and what isn't happening? Here are some tips that will increase your chance of getting a solid answer:
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A very clear minimal demo. The less code/markup the better. 

 

[Cassie]

If you watch the video I linked to you'll see that the tween that moves the container along has to be set up a certain way in order to allow for containerAnimation to work properly.

Your two approaches are incompatible.

You can either use a simple scrollTween and containerAnimation - like so. 

See the Pen 46a560c620a3ce10427be702f7d1cb2b?editors=1010 by cassie-codes (@cassie-codes) on CodePen

 

Or a timeline approach like this

See the Pen 388b8c2bf70c03f614f2224115379a5b by cassie-codes (@cassie-codes) on CodePen

 

GSAP needs the containerAnimation tween to be set up in a certain way in order to calculate positions, when it isn't set up like that, everything gets thrown off. 

Hope this helps