ScrollSmoother not working like expected

[kodralex]

Hi All,

 

So I've started dabbling with the ScrollSmoother to create some straightforward parallax elements on the screen. But it doesn't seem to be working as I expect it to. I've not created a codepen but can supply a demo link here: https://optimus.devweb.site/.

 

You will see I've added 'data-speed' attributes on the four small white icon boxes on the left-hand side. What seems to be happening is these boxes are on screen when the page loads - rather than being in a set position further down the page (see attached screenshot), and when I scroll, they seem to be going down the page rather than up (so they are always in view) which is a bit odd. I'm expecting this to work, on page load, they should be positioned like the attached image and then when I scroll down the page, the boxes move at slightly different speeds upwards with the rest of the page content. You can see my setup gsap code here:

 

https://optimus.devweb.site/wp-content/themes/optimus/assets/js/gsap-settings.js

 

Any pointers? Is there something I'm blindly doing wrong here? Thanks

[Cassie]

Hi there! 

 

data-speed="0.5" is half of the normal scroll speed. If you want it to be faster you'll need to go for something like data-speed="2" - twice the speed of normal scroll speed.

data-speed="1" is neutral.

 

Hope this helps.

[kodralex]

I think I figured it out. It's because the 'default' data-speed would be 1 rather than 0. So i've adjusted and made higher and this seems to fix it.

[kodralex]

Just now, Cassie said:

Hi there! 

 

data-speed="0.5" is half of the normal scroll speed. If you want it to be faster you'll need to go for something like data-speed="2" - twice the speed of normal scroll speed.

data-speed="1" is neutral.

 

Hope this helps.

You replied just when I figured out what was happening. Thanks

[kodralex]

@Cassie Is there a way to set the items to start moving from their original set positions on the page? E.g. looking at my example link again: https://optimus.devweb.site/. If you scroll down, you will see I have three coloured panels under the heading 'SECTORS' The default position of all these panels should be at the same level. If I add data-speed="1.2" to the middle panel (which I have done), when I scroll down, it starts at a lower position when the panels enter the viewport (See attached image). Is there a way so when all the panels enter the viewport, they are in their original positions, and then the middle panel would start moving up quicker on scroll. Is this possible?

 

After further playing around with this. It looks like elements hit the original position in the middle of the viewport. I guess it's this that i'd like to change.

[Cassie]

No, afraid not. That's the default behaviour.

You could use ScrollTrigger instead to animate the elements on the y axis if you need more control over start and end positions.

 

gsap.to('.element', {
 y: 200 // amount of px
 scrollTrigger: {
   trigger: ".container",
   start: "top bottom", // when the top of the trigger hits the bottom of the viewport
   end: "bottom top", // when the bottom of the trigger hits the top of the viewport
   scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
})

s

[kodralex]

I did think there was the ScorollTrigger option. I guess it does make sense that the default view is right in the center of the viewport. It's a really cool plugin this one. Thanks for taking time out to look for me, much appreciated.