The animation of multiple blocks with horizontal scrolling is not working

[dedeinc]

Hi, there. I'm considering GSAP and ScrollTrigger to implement a horizontal scroll animation.

 

◯What I would like to implement
Horizontal scrolling (2 blocks)
Parallax of images
Display of headings and body text

 

◯Plug-in
ScrollTrigger

 

 

 

When I implemented it, there is no behavior problem with 1 block, but when I increase to 2 blocks, scrolling and other behaviors do not seem to work at all.

 

【In the case of 1 block】 (Please press 0.5x or 0.25x)

See the Pen WNPXEOe by tozpsqam-the-animator (@tozpsqam-the-animator) on CodePen

 

【In the case of 2 blocks】

See the Pen YzBYPRO by tozpsqam-the-animator (@tozpsqam-the-animator) on CodePen

 

Is there any way to work the behavior of images, headings, and body text work even with two blocks?

 

 

 

By the way, even in the case of two blocks, if the behavior of images, headings, and body text are disabled, it will work fine.

 

【In the case of 2 blocks (without the behavior of images, headings, and body text)】

See the Pen eYxeWRM by tozpsqam-the-animator (@tozpsqam-the-animator) on CodePen

[mvaneijgen]

Hi @dedeinc welcome to the forum!

 

I think your issue was a scoping issue. At the top of the document you get all the headings and all the images, but you want to get the images inside the current scrolling container. 

 

I've wrap all your code in a forEach loop for the amount of .js-sideScroll there are on the page and then do all the logic for each .js-sideScroll inside that loop. (somehow your images went missing in the process and I can't seem to figure out where they've gone 🫨)

 

A view side notes. ScrollTrigger can only ever be on the timeline not on individual tweens of a timeline. Your text animation is with css transitions, you now have access to GSAP, so I would have them animate with GSAP. If you must use transitions, never use transition ALL, just target the property you want to animate ❌ transition: all .25s linear; ✅ transition: transform .25s linear;

 

Hope it helps and happy tweening! 

 

 

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

[dedeinc]

Hi, @mvaneijgen !

I didn't have the thoughts that to get the images inside the current scrolling container.

I fixed the code and solved them.

 

I greatly appreciate that your advice for the issues!