Jump to content
Search Community

How to keep div start position using 'data-speed'

cerealbeast test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Trying to implement 'data-speed' using scrollsmoother on my site but whenever I add a data-speed attribute, it moves the div's starting position which breaks the layout of the site. I have found a website that is using 'data-speed' on sections and somehow keeps the divs in the same starting position.

 

I can't see anywhere in the code for that site that is making this work correctly like this, hoping someone can help me out.

 

I have forked a Greensock codepen of a simple scrollsmoother page and changed the height of the top section from 100vh to 50vh to show how it "breaks" the layout:

 

 

 

See the Pen qBKwdmZ by gwjr (@gwjr) on CodePen

Link to comment
Share on other sites

  • Solution

Hi,

 

That site is actually using Locomotive for the smooth scrolling. If you inspect the data attributes you'll see that they are using data-scroll and data-scroll-speed:

<div class="p-30 xs:p-60 flex items-center justify-center absolute w-full h-full left-0 top-0 z-2 is-inview" data-scroll data-scroll-speed="3" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 116.128, 0, 1);">

If you check locomotive's docs you'll see that's how is applied:

https://github.com/locomotivemtl/locomotive-scroll#smooth

 

Finally in the case of your example perhaps there is no need to move the entire header, just the content inside it. Just add the data-speed amount in those elements or a parent element wrapped around the header. Something like this:

See the Pen BaVELLK by GreenSock (@GreenSock) on CodePen

 

Hopefully this makes things clearer. Let us know if you have more questions.

 

Happy Tweening!

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...