Jump to content
Search Community

ScrollTrigger layer pinning + ScrollTo ↑ ↓ Controls

limbo test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

I'm close here but can't get this over the line.. probably something very stupid (been a long day)

 

The js doesn't fire correctly clicking the up arrow. Down works reasonably well... perhaps something in my approach with ScrollTo+Scrolltrigger hooks (using/updating data attr.).  Also scrolltrigger doesn't update first slide data id when reaching the top (scrolling)... Anyone got any ideas? Any help would be hugely appreciated. 

 

 

See the Pen MWGxJax by liamcrean (@liamcrean) on CodePen

Link to comment
Share on other sites

Hey

 

Due to the

pin: true

of the sections the upwards scrolling doesn't work properly anymore. You can work around it by specifying an offset so that the snapTo does the rest.

Not sure if this is the right approach as I haven't had such a use case yet, but at least your current problems would be solved so you can continue.

See the Pen JjvzvWM by alig01 (@alig01) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Yeah, when you do a normal scrollTo tween, it just checks how far the element is from the top, so like @alig01 said that won't work if you've got pinning going on because that calculation would no longer be accurate. There's a helper function for a ScrollTrigger-aware way of determining the scroll position of an element in the docs:

https://greensock.com/docs/v3/HelperFunctions#getScrollLookup

 

I'm not sure why you're using data attributes to track the up/down values rather than simple JS variables, and I'd probably wire up things differently so the values flip when things are in the center (rather than waiting until it all settles in the final position), but I don't have time to rework it all for you. Here's a fork showing at least a band-aid for the issue you posted about: 

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

 

Good luck!

  • Like 1
Link to comment
Share on other sites

Thank you both for taking the time to look at this. Much appreciated (Especially on a saturday!)

 

1 hour ago, GreenSock said:

when you do a normal scrollTo tween, it just checks how far the element is from the top, so like @alig01 said that won't work if you've got pinning going on because that calculation would no longer be accurate.

 

This explains a LOT of headscratching. Makes total sense. Thanks :)

Link to comment
Share on other sites

Hi,

 

I took a stab at this earlier but haven't been able to complete it. As Jack mentions I went for a simpler approach.

 

Hopefully if you combine some parts of each codepen in thread you'll be able to solve your issue:

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

 

This is still missing some events to track usage of the scroll bar to move the content up and down. I hope that I can finish it either later today or at some point tomorrow.

 

Let us know if you have any other questions.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Thanks all for the replies. An update on this one, as somebody might find it useful.

 

See the Pen mdKbwJo by liamcrean (@liamcrean) on CodePen

 

I decided to try and make as much of this native to CSS's Sticky and Scroll-Snap as they've excellent support and can degrade easily to normal scroll behaviour in IE. Also found that the approaches detailed above REALLY struggled with the resize issues you get with ScrollTrigger on iOS (nav bars hiding/showing) + the 1px JS hacks for content failed in places too.

 

This approach still makes good use of scrollTrigger / scrollTo to enhance UI and give hooks for controls, but with less js  overhead and a sprinkle of CSS layout tricks on content.

  • Like 2
Link to comment
Share on other sites

  • 2 months later...

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