Background image change on scroll

[Aragorn Elessar]

Hi guys,

I am dealing with an issue right now. I've specified it in the CodePen JS page. 

Is there a way to make this?

See the Pen zYMbKbE by Aragorn_ (@Aragorn_) on CodePen

[mvaneijgen]

Hi @Aragorn Elessar welcome to the forum!

 

What have you tried already? We love to see what you can come up with yourself, that way we can see your thought process and thus better help you. The best way to learn is to get your hands dirty and just write some code, if you're stuck again post back here with the (not working) code and someone will be sure to help you out. 

 

Check out these getting started guides if you need some guidance 

 

https://greensock.com/get-started/
https://greensock.com/get-started-2

And a small little hint: I would start with a timeline and don't worry about scroll at the beginning, because the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

[Aragorn Elessar]

On 8/4/2023 at 3:26 PM, mvaneijgen said:

Hi @Aragorn Elessar welcome to the forum!

 

What have you tried already? We love to see what you can come up with yourself, that way we can see your thought process and thus better help you. The best way to learn is to get your hands dirty and just write some code, if you're stuck again post back here with the (not working) code and someone will be sure to help you out. 

 

Check out these getting started guides if you need some guidance 

 

https://greensock.com/get-started/
https://greensock.com/get-started-2

And a small little hint: I would start with a timeline and don't worry about scroll at the beginning, because the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

Thanks for the advice and the info, the links proved to be extremely useful to me, I've learnt a lot about GSAP animations. The solution I've already tried is in the attached .js filetestscript.js