Jump to content
GreenSock

goodcontext

I have a question about the horizontal scroll.

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

Thank you for your kind explanation.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×