Jump to content
Search Community

Small Job: Animate an image on scroll

Drewguy test
Moderator Tag

Recommended Posts

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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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.
×
×
  • Create New...