kodralex Posted April 20, 2022 Share Posted April 20, 2022 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 Link to comment Share on other sites More sharing options...
Cassie Posted April 20, 2022 Share Posted April 20, 2022 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. Link to comment Share on other sites More sharing options...
kodralex Posted April 20, 2022 Author Share Posted April 20, 2022 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. Link to comment Share on other sites More sharing options...
kodralex Posted April 20, 2022 Author Share Posted April 20, 2022 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 1 Link to comment Share on other sites More sharing options...
kodralex Posted April 20, 2022 Author Share Posted April 20, 2022 @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. Link to comment Share on other sites More sharing options...
Cassie Posted April 20, 2022 Share Posted April 20, 2022 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 Link to comment Share on other sites More sharing options...
kodralex Posted April 20, 2022 Author Share Posted April 20, 2022 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now