Horizontal scrolling breaks the scrolltrigger

[ssense]

Hi,
I have a problem with the correct scroll trigger after a section with a horizontal scroll.

Text animations load correctly before the horizontal scroll. But the horizontal scroll breaks the start of the text animation under that section.

How can I fix this?

See the Pen vEYjJeP by Sensowny-mateusz (@Sensowny-mateusz) on CodePen.

[mvaneijgen]

First off you should never animate your trigger element! I've given your ScrollTrigger some readable markers and as you can see the markers are off by how much you animate them. I would use the section as the trigger instead of using the element it self

 

For the issue you're facing check the ScrollTrigger docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#refreshPriority it is important to create the ScrollTriggers in the order they appear on the page. If you can't do this, you'll have to use the refreshPriority property to set the order yourself. 

 

Hope it helps and happy tweening! 

 

See the Pen OPJZQvm?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

Edit: I would set it up something like this where how you set the data-prio is up to how it best fits in your project! 

 

See the Pen qEBYxKB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.