Scrolltriggered timeline with pin + ScrollSmoother: is there a way to ease the "stop" when the pinning kicks in?

[Snail]

Dear Supporters,

thanks for the amazing gsap library, it's a real joy to work with this, making mistakes and yet progress every day!

 

Currently i'm hunting down a small detail, nothing essential but would be nice to have:

• I do have a page where scrolling is smoothed by ScrollSmoother, so scrolling feels smooth, independently on the input device. That's fine.
• I currently have a section in that page that is pinned by scrolltrigger and pin:true. So the overall pagescrolling pauses there to play that timeline within the pinned element, then goes on. Fine too. 
• But the stop when the pinning kicks in is abrupt, it's not "smoothed" like the rest of the scroll down motion.

It would be cool if the pinned element slows down when it's closing in to it's trigger mark, and stops then, and after it's unpinned it starts to move on again with that "smoother lagging" effect. Is there a way to do that?

 

My current project is a mess generally, if required i may be able to construct an example.
But maybe it's just a "not (yet) possible" answer so i can stop looking for a solution.

 

thanks for you input

Snail

[mvaneijgen]

Hi @Snail thanks for the kind words! I don't know anything on top off my head, but if you create a small minimal demo with just the bare essentials we would be happy take a look and dive in the code with you. I would figure that if you set a scrub: true value to your ScrollTrigger and start with an animation in the same direction as the scroll direction you could make it feel a lot smoother, but again I have to see the effect to say something definitive.

[GreenSock]

Yeah, sorry, but that isn't really possible currently. What you're talking about would require some very tricky logic that might actually cause unintended problems. Imagine your pinning element gets pinned at exactly 500px of scrolling (let's say it's 500px away from the top, and you want it to pin when it gets to the very top). In order to "smooth" that, you'd actually have to MOVE it in the opposite direction of the page scroll for a little while, let's say 50px. So that actually means it'd end up pinning at 550px from the top, thus it would move away from the background by 50px. It'd "drift". Maybe you'd like that effect...maybe it'd totally mess up some layouts. And the effect would have to be scrubbed, thus if you slowed down your scroll or sped it up, that "drift" would scrub accordingly. 

 

It's just not a simple thing to do, that's for sure. With enough elbow grease, you might be able to fake something like that but I'd imagine it'll be challenging. Sorry, I wish I had a silver bullet to offer you. 

 

Thanks for being a Club GSAP member! 💚

[Snail]

Okay ... i understand the logic and implication with the element moving relatively to the background better now.

As "enough elbow grease" is not within my skills set yet, and the priority for this detail is low, i'm going for the "not possible" answer and still enjoy the rest.

 

Thanks for your fast and competent feedback ...

 

Now onwards with that dreaded mp4 scrubbing mobile performance optimization, that our project lead sold so happily to the client

[Snail]

19 hours ago, mvaneijgen said:

I would figure that if you set a scrub: true value to your ScrollTrigger and start with an animation in the same direction as the scroll direction you could make it feel a lot smoother, but again I have to see the effect to say something definitive.

 

That's a good idea to make it feel like it's "closing in" without actually doing it logically. I'll give that a try to see if that is "good enough".

[GreenSock]

🙂

 

Just a little tip on that MP4 scrubbing stuff - encoding is the key there. You'll have to make sure you place keyframes VERY often, otherwise it'll look choppy when scrubbing, especially backwards. It has nothing to do with GSAP - it's the nature of how video works. You could use an image sequence instead, depending how the video encoding file size compares to an image sequence. Here's an example with an image sequence - I built a helper function to make it easier: 

 

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

 

These threads may also help: 

Good luck! 

[Snail]

Thanks ...

 

i'm aware of the encoding with keyframes and have read the threads above, and am doing that with ffmpeg command line (no idea if this is the optimum yet):

ffmpeg -i input.mp4 -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output.mp4

 

It's running very very fine on faster Desktops / Laptops  (like imac 2019, thinkpad T16 2022) fowards and backwards, but still gets a bit choppy on slower pcs and mobiles.

 

I'll try to experiment ...

– on smaller pixel dimensions for those devices (instead of scaling them)

– negotiate a cutdown the number of videos on the page (maximum curently is 7 scrub-by-videos, most in the lenght of 120-180 frames on one page)

– dynamically load/unload them on viewport-intersection intead of having all of them "ready" same time?

 

A special case is a big 100vw/100vh header video (very similar to the apple headphones animation) that is fixed in the background, while the rest of the page scrolls above it in a scrollsmoother container ... i'm rather sure doing it with fixed position and other content scrolling by visually in front of it is a performance killer, but have not found a way around it yet to keep it in position. Pinning within the scrollsmoother? 

(This is where i started that specific journey, and that part of the project may be even worse skill quality than the rest of it)

 

Thanks for that helper function for a canvas draw though – i have not seen that helper yet and it might make things easier to handle and save me for at least some of the "videos" if the other things fail to perform.

 

So much for "computers are fast enough for anything in 2024" ...

[Rodrigo]

On 1/26/2024 at 7:20 AM, Snail said:

Pinning within the scrollsmoother? 

You can definitely pin when using ScrollSmoother, in a regular fashion using ScrollTrigger:

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

 

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

 

Hopefully this helps.

Happy Tweening!

[Snail]

On 1/27/2024 at 6:14 PM, Rodrigo said:

You can definitely pin when using ScrollSmoother, in a regular fashion using ScrollTrigger:

 

sorry, i was too unspecific about that "header video" pinning situation. 

 

What's in the briefing is this:

• We have a section as the start of the page (it contains a video, but that's not really specific to videos), it's height is the viewport height.
• When scrolling down, the video scrubs trough on a scroll distance of 3 times its height. The video should stay visually fixed in its place for that long, not moving upwards.
• The sections coming next should be displayed visually in front of that video and scroll by it. So the video becomes like a background animation then.

 

Currently i have a display:fixed container w with subzero z-index that contains the video in the background.

And there's the rest of the page that is natively scrollable (in my case: with scrollsmoother), that scrolls past that background container independently.

 

So if i wanted to change that to be gsap-transform-pinned instead of css-fixed, the actual question is:

Can i make pinned elements stay in place, even while follow up elements in the same container scroll by in front of it?
Or do follow-ups naturally "push" the pinned element away?

(I understand how pinning technically works, by adding padding below the element to keep the follow ups out of view as long as specified.

I think i'd acually need ... negative padding?)

 

Thanks a lot for your patience  

(should i create one thread per problem, or is it okay to run this in one "Snail's beginners questions" thread?)

 

[GreenSock]

@Snail yeah, if you'd like more help please create a new thread and make sure you provide a minimal demo (like a CodePen) that clearly illustrates the issue with as little code/markup as possible. ✅