Jump to content
GreenSock

Sismeo

scroolsmoother : translate Y in visible viewport is not 0

Go to solution Solved by Cassie,

Recommended Posts

Hello,

Thank for scrollsmoother implementation, it's really cool.

I notice the position of the animated divs with scrollsmoother (data-speed)  are not positioned to 0. So i can't align divs with different height in the viewport when the page is not scrolled. It's not really problematic after scrolling. But i need to design precisely my headings and visual in top of the page.

 

I've done a pen to be more precise (i hope i am)

 

 

So in this exemple i think all box should be top aligned cause we don't have scroll yet.
the Yposition also change depending to the window height.

 

Thanks,

See the Pen ZEoogJb by Hioudje (@Hioudje) on CodePen

Link to comment
Share on other sites

  • Sismeo changed the title to scroolsmoother : translate Y in visible viewport is not 0

Hi there - this is a design decision - all items will be at their correct alignment when they hit the middle of the browser window.

However, this does mean that if the elements are already in view then their animation is 'in progress' at the time the page loads. This isn't always ideal.

I'd suggest using a scrollTriggered timeline for elements about the fold. Like so -

See the Pen jOxKbxv?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Does this work for you/help your situation?

 

 

  • Like 5
Link to comment
Share on other sites

Hi @Sismeo

 

Thank you for the clear demo. I spent some time exploring this and couldn't quite explain exactly why things were appearing this way.

 

@Cassie

 

Ah, this seems to be the missing nugget!

 

2 hours ago, Cassie said:

all items will be at their correct alignment when they hit the middle of the browser window

 

Thanks for that!

 

One of the bigger things I couldn't wrap my head around was why taller items with the same speed as other items were moved in seemingly weird places. Now that I know that everything has to be in it's "native" position when it hits the center of the screen all of this makes much more sense.

 

I created a new pen that hopefully clearly illustrates this behavior for others. Probably best viewed in it's own, taller window.

 

See the Pen vYjrKWX?editors=1100 by snorkltv (@snorkltv) on CodePen

 

Also a little tip for everyone that doesn't want to go crazy. If you have codepen configured to auto-update (no run button) it seems that some css changes will be updated on the fly but it's not a real reload as the ScrollTriggers will not refresh and update. I strongly recommend disabling the auto-update when working with ScrollTrigger in codepen. Thought I was going nuts for a bit.

 

 

  • Like 4
Link to comment
Share on other sites

Great demo, @Carl. I just added some notes to the docs to make things clearer, and dropped your demo in there too. 👍

  • Like 1
Link to comment
Share on other sites

Thanks @Cassie, in state this solution solve my problem.

and thanks @Carl taking time for explanations and support ;)

 

@GreenSock great to update, i spend some time finding the reason. i think adding a tiny parameter in smoothscrooler could be great, cause the @Cassie solution is actually a bit tricky and approximative.

 

 

Thanks Superheroes !
Great Job

Link to comment
Share on other sites

  • Solution

You can make it less 'approximate' like this. Hope it helps.

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

  • Like 1
Link to comment
Share on other sites

Yes it look really better (for me at least).

 

The last point is that in comparaison with scroolsmoother the Ytranslation continue updating outside the view. i don't really know if it has a big performance influence.

I've try replacing the 'end' value to avoid it.

end: "max" => "+=${window.innerHeight * 1}",

It do the job, but finaly Y calculation is not good.

  • Like 1
Link to comment
Share on other sites

That's not really a big issue. The animation will only last as long as you're scrolling within that section. I wouldn't worry about that.

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