I have a question about the horizontal scroll.

[goodcontext]

Hello.

When scrolling horizontal, What should I do to set the ".background" image as a background?
It's not in the demo, but...I applied a different effect to the background image first.

Then, the ".images" horizontal scroll begins. But before we start horizontal scrolling. The background image moves up.

How do I leave the background image in the background while I horizontally scroll through the images?

See the Pen poaeOgb by goodcontext (@goodcontext) on CodePen

[mvaneijgen]

I had to restructure your code a bit, but here it is. Personally I always like to start with a timeline and add ScrollTrigger to that, this way if I want to animate another thing this will be really easy. You want to animate two things with one scrollTrigger, but because you started with separate animations/scrollTriggers they can't easily talk to each other. 

 

Also a great thing to keep in mind is that scroll animations are just animations, so if you remove ScrollTrigger and first focus on the animation and get that to look how you want, you can then when you're done add scrollTrigger. This way you can tackle everything one step at the time.

 

Again there is some restructuring happening with your code. I've used `object-fit:cover` for your background image. and I have overlapped all the images in CSS, because that is how you want it to look in the end.

That is also something to keep in mind, it really helps if you lay everything out with CSS how you want it to look in the end and after that start animating, because then everything is already in place.

 

That gets me to my next point `.fromTo()` is a great tool, but I rarely use it, because all the things are already in a position, so for example your image is already `opacity:1`, so if I do a `.from()` tween from `0` it gets there in one step. 

 

See the Pen xxYqyNw by mvaneijgen (@mvaneijgen) on CodePen

 

Good luck!

[goodcontext]

Thank you for your kind explanation and even making a demo.
I didn't understand English perfectly because it was not my first language, but I read it carefully several times.

1. Use timeline and add ScrollTrigger to it.
2. Use CSS value and avoid using fromTo().
That's what I understood.

Thank you again for your reply.

[mvaneijgen]

27 minutes ago, goodcontext said:

Use CSS value and avoid using fromTo().

Not avoid, but know why you use it. Most animations just use`.to()` and `.from()` 

 

I would add another point:

3. Scroll animations are just animations, so remove ScrollTrigger and focus on the animation at first and when you are happy with the animation enable ScrollTrigger again.

 

example:

See the Pen qBxrLvg by mvaneijgen (@mvaneijgen) on CodePen

d

[goodcontext]

Now I understand the third one.
I will also keep in mind the use of fromTo().

Thank you for your kind explanation.