ScrollTrigger pinjump and SVGMorph animation

[Punchify Me]

Hello,

 

I am having some issues with SVGMorph and ScrollTrigger. A reduced case demo is on codepen :  (not responsive yet)

 

1. ScrollTrigger : 

• Abrupt pinning: I notice a slight jump when the slider section pins to the top of the screen and again when it repins on re-enter. I have tried modifying with start and end values but that does not seem to change the behaviour. 
• Animation end : I would like to wait for the last wave to completely transform before unpinning the section and scrolling down to the next section.

 

I suspect that both these problems are due to me not properly defining the start and end or the scrub / snap  values.    

 

2. SVG Morph: I would like the waves to morph continuously based on scroll speed. Right now, I have to scroll a lot or scroll really slowly  for the morphing to be evident. 

I would appreciate inputs on how to solve these problems as well as any code errors.  

 

Thank you

See the Pen gOMggeZ by sunshinetainted (@sunshinetainted) on CodePen

Edited October 23, 2020 by Punchify Me
additional info

[ZachSaucier]

Hey Punchify Me and welcome to the forums.

 

1 hour ago, Punchify Me said:

Abrupt pinning: I notice a slight jump when the slider section pins to the top of the screen and again when it repins on re-enter.

This is because the scrolling thread is separate from the main JS thread (what GSAP is restricted to). So unfortunately we can't fix this directly. However ScrollTrigger has a property called anticipatePin which you can set to a numerical value (like 1) to try and make the jump less noticeable. You will probably have to play around with the value to get it working as well as possible.

 

1 hour ago, Punchify Me said:

I would like the waves to morph continuously based on scroll speed. Right now, I have to scroll a lot or scroll really slowly  for the morphing to be evident. 

It sounds like you want no/linear ease instead of the drastic Power4 ease like you have currently. Try ease: "none" instead and see if that's what you're wanting.

 

I also noticed you're using a lot of the old syntax. While it works, we highly recommend using the GSAP 3 syntax that's sleeker and enables you to use new features like GSAP's default functionality. See the migration notes for more info:

 

You could probably rewrite your code to use loops to be a little more efficient (developer ergonomics wise) if you wanted to. More about that in my article about animating efficiently.

[Punchify Me]

Many thanks Zach. Using anticipatePin does help with the abrupt pinning. I will also try to rewrite my code to use loops.