ScrollTrigger Pinning + Snapping (I think?)

[jillianadriana]

Hey friendly GSAP folks,

 

What's the best way to make the attached CodePen situation feel more regulated/natural? (Not sure how else to describe it).

 

Basically, make it harder to scroll through/miss each of those pinned H2s, so each of them is a bit more sticky when it fades in and doesn't fade out so quickly/easily. I've been playing around with snapping but I haven't managed to find a solution.

 

Does that make sense? I've been working all day so my brain + words = scrambled.

See the Pen GRmjywZ by jillianadriana (@jillianadriana) on CodePen

[GreenSock]

I'm not sure I totally understand what you're after, but if you want it to stay pinned for longer (which means stay on the screen longer of course, including each animation), just increase the "end" value on your ScrollTrigger. Currently you've got it set to end: "+=300%", so you can do a higher number. You can use px if it's easier. 

 

It might be helpful to read this: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

[jillianadriana]

Thanks, Jack.

 

Follow up semi-related to this. Would love your opinion and anyone else who wants to chime in.

 

Client just told me those pinned sections don't test well with users, which I'm inclined to disagree with. I think they increase engagement. She says they tend to make people leave the page.

 

I feel like GSAP/ScrollTrigger in particular is becoming more popular because of features like pinning and scrubbing, so I'm seeing a lot more of it on high-end websites, which doesn't indicate to me that it's off-putting for users at all.

 

Thoughts?

[OSUblake]

Best bet is to do A/B testing. Pinning can be executed well, see some of Apple's pages. However, sometimes people can go a little overboard. Just because you can do something, doesn't mean you should.

 

 

[jillianadriana]

Totally agreed. I specifically work with sales pages for online coaches/course creators, which are often 15+ Google Doc pages of text, so I do like being able to create pinned sections to try to make reading it all feel less daunting, especially if there's a section that's really important or should stand out.

 

So I never go overboard with it.

[jillianadriana]

PS: This page... chef's kiss 🤩

 

https://www.apple.com/imac-24/

[GreenSock]

10 hours ago, jillianadriana said:

Client just told me those pinned sections don't test well with users, which I'm inclined to disagree with. I think they increase engagement. She says they tend to make people leave the page.

I think it all depends on execution. If you just have things pinned statically for a while, I do NOT think that's good. As a user, I'd get frustrated because when I'm scrolling but I don't see anything happening, I'd start wondering if my mouse is broken or the site is broken. Frustrating. But if you pin and you have scroll-driven animations happening, great! It can increase engagement, as users wonder what's gonna happen next. In your demo, it seemed like you were just having static things sticking on the screen and I wouldn't be at all surprised if that does poorly in user testing.