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. ?
