Jump to content
GreenSock

James135

Horizontal Scroll with Sticky section

Recommended Posts

Made a custom workaround (sloppy) using the current scroll position, might update the Pen if there's interest. The question still stands however as I haven't seen this specific example using horizontal scroll and draggable with a sticky element, might be useful if a pro figures out how to do it the right way

Link to comment
Share on other sites

Sure! We'd love to see your solution. Perhaps it would help someone else here down the road. 

Link to comment
Share on other sites

On 8/3/2022 at 12:11 AM, GreenSock said:

Sure! We'd love to see your solution. Perhaps it would help someone else here down the road. 

Essentially I made a fake pin, where I just stream the current scroll position (args.progress seems more accurate than args.scroll()) via the onUpdate() function in a scrolltrigger instance, I'll clean things up and post a codepen later as I'm still trying to fully understand what I did

 

For those that may have trouble with this kind of thing, here's my advice/thoughts:

 

Initially scrolltrigger seemed very abstract when trying to make it work with "real" pins, it was like learning a new language, things wouldn't stick, or wouldn't trigger. Then, I tried to make scrolltrigger instances work for me, and I learned I could create one on any DOM element, and it would spit out useful data, I realized you can do any DOM manipulation like that, and it brought me back to more familiar territory and stuff I had seen with Locomotive Scroll. At that point I stopped trying to follow the examples and just tried it myself and things just worked, because once you have real up to date data on your DOM elements and which position you are in the page's scroll, you can make use of a million tools, like clamp functions from lodash (I think GSAP has a clamp util too) and so many other tools. I don't know it was like a light clicked like "Ohh okay that's how you use scrolltrigger". 

 

I'll post a pen (or preferably stackblitz) with a more concrete example of what I mean, but my advice is to not be afraid of fake pinning.

  • Thanks 1
Link to comment
Share on other sites

Update: 

 

I ended up coming across an issue where the fake pin would sometimes be slow, after every 3rd or so refresh of the page the animation would start stuttering, I decided to just sit and try to figure out what was causing it, spent two hours and I learned a lot instead of sending it to the back of the backlog. Was not GSAP related at all. Fake pinning worked flawlessly in the end

 

If you're using Angular, make sure you use Renderer2 in Angular, the performance boost will be huge compared to any other alternative when applying transform.

 

Just stream the scroll position via the onUpdate() of the animation, like I explained in my last post, send that over to the pinned element (I did it via bSubject, there are better ways out there as well) and apply the appropriate transform via Renderer2, it's crazy fast and it may be as good as the real thing

 

Some variation of this may help, what this piece of code does is apply your streamed -> transformed offset value (x) to the #sticky element, simulating a sticky effect

 

// use a variation of this, you can subscribe to the onUpdate, like via bSubject, but there are better alternatives, it just works for me

let el = document.getElementById('sticky');
this.renderer2.setStyle(
  el,
  'transform',
  'translate3d(' + x + 'px,0px,0px)'
);
})

 

  • Like 2
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.
×