Small Job: Animate an image on scroll

[Drewguy 2 Likes (Newbie)]

edit: just realized this is possibly more of a vanilla JS job

 

I am trying to animate a left to right moving image under a native horizontally scrolling "carousel". The idea is to simulate a scrollbar tab. Changing the scrollbar tab in CSS works great for desktop (see published and live implementation here: https://bit.ly/2Nb4tif), but Apple has taken over scrollbar styling on their devices, so I'm using a static image on mobile.

 

Here is a basic codepen you can start with of the horizontal scroller: 

See the Pen XWXpxLp by drewbots (@drewbots) on CodePen

I have been trying to use ScrollMagic to achieve this: 

See the Pen rNxjWQW by drewbots (@drewbots) on CodePen

But I think we will ultimately need ScrollMagic plus GSAP. As far as I know, GSAP does not support horizontal scrolling or reacting from scrolling a specific div.

 

 

I think it's about an hours work or less for the right person. Maybe this should be a forum post, but I don't want to just ask for free help, I'm not really a developer.

[ZachSaucier 7,152 Likes (Superhero)]

Hey Drew. Welcome to the GreenSock forums!

 

This is straightforward using our scroll plugin, ScrollTrigger. We don't recommend using ScrollMagic  

See the Pen ExPZOgw by GreenSock (@GreenSock) on CodePen

[Drewguy 2 Likes (Newbie)]

Wow, thanks!

 

GSAP rules

[Drewguy 2 Likes (Newbie)]

42 minutes ago, ZachSaucier said:

Hey Drew. Welcome to the GreenSock forums!

 

This is straightforward using our scroll plugin, ScrollTrigger. We don't recommend using ScrollMagic  

 

 

Zach, is it also trivial to set the animation length to be responsive to the page width?

 

edit: so the div always stops at the right edge of the carousel, no matter what size screen you are using

[ZachSaucier 7,152 Likes (Superhero)]

11 minutes ago, Drewguy said:

Zach, is it also trivial to set the animation length to be responsive to the page width?

 

edit: so the div always stops at the right edge of the carousel, no matter what size screen you are using

It is doing that already  I didn't take into account the extra offset but that's simple to fix. I didn't figure it was worth doing in the demo since that's very likely not going to be the final design and sizing.

[Drewguy 2 Likes (Newbie)]

4 minutes ago, ZachSaucier said:

It is doing that already  I didn't take into account the extra offset but that's simple to fix. I didn't figure it was worth doing in the demo since that's very likely not going to be the final design and sizing.

 

Oh, i see now.

 

I didnt notice:

.bar {width: 10vw;}.

 

very clever

 

cheers mate