Need help, containerAnimation not working on my timeline

[Ian123]

Hi -

Im trying to create a horizontal scroll website with uneven container sections, each seaction has different animations however when Im trying it in my code pen containerAnimation is not working when I assign it the scroll tween. The markers are still vertical.

Here's a code pen link.

See the Pen abryoWO by ian-marquez (@ian-marquez) on CodePen

[mvaneijgen]

Hi @Ian123 welcome to the forum!

 

The frist step in debugging anything should be updating to the latest version, you were loading version 3.6.1 and we are currently at versions 3.12.5! A lot has changed in the mean time. 

 

When you want thing to work horizontally, you'll have to set horizontal: true on your ScrollTrigger, check the docs for all the ScrollTrigger properties https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1

 

You don't have enough space for the animation to finish, so I've moved the element over and changed the ScrollTrigger end trigger. Hope it helps and happy tweening! 

 

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

[Ian123]

I see, thanks for the help! didnt notice the version as I forked of another guy's pen.

So the only thing wrong was horizontal scroll. Shouldn't have trusted an old video from 2021, was saying it was no longer needed lol should have trusted my gut.
again thanks for the help! 

[mvaneijgen]

Seems like you indeed don't need to set horizontal: true, it will infer it automatically. It was my go to seeing things were not working, but it was the old version you were loading! 

 

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