gsap Horizontal Histroy

[Sukru 6 Likes (Newbie)]

Hello, I want to make a stream like on this site. I partially succeeded, but I can't control the parallax. The parallax in the blue background that comes after CHAPTER 01 comes into play long ago and the right part looks bad. Actually, I have to give a container a 100% width and the main container a 300% width right now, I couldn't get it to get the width automatically. Can you help me?

 

My sample site

https://transmissions.cristobalbalenciagamuseoa.com/2019-21/moe-matsuoka.html

 

See the Pen dyKWeOg by sukruemanet (@sukruemanet) on CodePen

[Rodrigo 5,035 Likes (Superhero)]

Hi,

 

The problem is that some of your animations are starting at the same time, that's why all your markers are in the same position:

 

You have the same class for different images in different sections, so  ScrollTrigger is doing exactly what is supposed to do, your HTML setup needs to be reviewed and the selectors you use in your GSAP instances as well.

 

Finally is always a good idea to create your ScrollTrigger instances in the way they happen on the screen, right now it seems to me that they are backwards.

 

Let us know if you have more questions.

 

Happy Tweening!

[Sukru 6 Likes (Newbie)]

@Rodrigo thank you very much