ScrollSmoother Effects Speed Direction

[utopian]

Hi there,

 

I was wondering if it's possible to have the ScrollSmoother effect "data-speed" have an element parallax the opposite direction. At the moment everything seems to always move from down to up when using "auto", it would be nice to be able to add a parameter to flip the direction of the animation. For example, on a project I'm working on. There are two images next to each other and my client wants to have each image parallax in opposite directions. Using "auto" they both go the same direction so it doesn't really do the trick. Obviously I could do it using GSAP, but it seems like it would be a nice trick to be able to just utilize the ScrollSmoother effects and add extra param to set the direction.

 

If this isn't currently available, maybe you could let me know if there's a place I can request the feature? Thanks!

[GreenSock]

When you do data-speed="auto", it automatically figures out how much space there is and moves it accordingly. So if you want it to move up, then simply set your HTML/CSS up on that element such that the gap is at the bottom. If you want it to go the other direction, make the gap be on the top. It should be that simple

 

If you still need some help, please make sure you provide a minimal demo that clearly illustrates the challenge you're facing. A few simple colored <div> elements and an image should be plenty. 

 

Thanks for being a Club GreenSock member! 🎉

[Jon J]

Thank you for this!  One of my elements used data-speed="auto" and suddenly switched directions on me, moving downwards instead of up.  I realized this was because I had unwittingly given it equal gaps on top and bottom:

/* Image wrapper */
.image-wrap {
  overflow: hidden;
}

/* Image with data-speed="auto" */
.image {
  transform: scale(1.2); /* Scale up to provide gap */
  /* transform-origin's default value "center" caused equal gaps on top and bottom */
}

With equal gaps, GSAP likely had to guess which direction I intended — and guessed correctly until it didn't. 

Setting transform-origin: center top yielded a bottom gap and predictable results.

 

Really enjoying ScrollSmoother — how easy it is to set up in Nuxt.js, and how well it works with ScrollTrigger. 💪