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. 💪
ScrollSmoother Effects Speed Direction
in GSAP
Posted
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:
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. 💪