Complete MorphSVG transition when scroll is triggered

[Israr]

I am playing with svg morphing using scroll trigger and MorphSVG. Currently, the scroll controls the animation transition, but I want the transition to start and complete when the scroll is triggered without stopping in the middle of a transition, and stop the first scroll triggered.

Once the above transition is completed and the scroll is triggered again then I want to scale up the same svg.

See the Pen BaOpzmv?editors=1010 by israr-ul-haq (@israr-ul-haq) on CodePen

[mvaneijgen]

Hi @Israr welcome to the forum!

 

ScrollTrigger allows you to trigger animations at certain points (triggers) on the page, so if I understand you correctly you just want to wacht for the scroll event and fire some logic if someone scrolls. That is what the Observer plugin is for, check out the Observer docs.

 

Here is a demo demonstrating it magic:

 

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

 

If you still want to use ScrollTrigger you can remove the scrub: 1 from your ScrollTrigger object (or set scrub: false) and have two separate ScrollTriggers one for the first animation an the second one for your scale animation. You can also then set up the snap property to have it automatically snap to the desired points, read more on the ScrollTrigger docs, but the Observer plugin would in my option be the better bet! Hope it helps and happy tweening! 

[Israr]

Hi mvaneijgen

Thanks for the quick response, This above example has based on a section but I am using the scroll trigger Pin section, after completing these two animations I want to go with a normal scroll. can you please elaborate on this with an example in my demo codepen.

 

Also when I changed the scrub: 1 to false, the animation is running on load, I want this on two scrolls and two animations on scroll

[mvaneijgen]

Sorry, I don't have time to build out a whole demo. The Observer plugin requires a whole other approach to your ScrollTrigger setup. I do however found an example that uses the Observer plugin at first and when it's completed it switches back to normal browser scrolling. Hope it helps!

 

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

[Rodrigo]

Hi,

 

1 hour ago, Israr said:

Also when I changed the scrub: 1 to false, the animation is running on load, I want this on two scrolls and two animations on scroll

I'm a bit confused by this. The animation runs as the page loads because of the start point you're passing to ScrollTrigger, so when the top of the element reaches the top of the viewport the animation starts. Since the element is at the beginning of the document, it's top is already at the top of the viewport. What exactly you mean that you want this on two scrolls and two animations on scroll? I just can't get my head around that 🤷‍♂️

 

The codepen example @mvaneijgen provides gives you a very good hint of how this can be achieve with the Observer Plugin.

 

I forked your codepen and used the Observer and ScrollTo Plugins to create something that hopefully is close to what you're looking for:

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

 

Hopefully this helps.

Happy Tweening!

[Israr]

Hi Rodrigo,

Thanks a bunch for the help. I must say that's very close to what I was expecting. I do have some comments and it'll be a great help if you can consider them. 

Currently, all the animation (morphing from the first symbol to the infinity symbol and then zooming in of the infinity symbol) is completed as the scroll is triggered. But I want to divide the animation into two pieces. When the page loads and the user scroll, the first symbol should morph into the infinity symbol and when this morphing is completed, we need to stop the animation. When another scroll is triggered, I want the infinity symbol to zoom in. What you did is perfect - we just need to stop the animation and scroll in between the two pieces. 

Looking forward and thanks again!

[Rodrigo]

Hi,

 

Yeah that's a bit more convoluted and you wouldn't need ScrollTrigger in that particular case for the mask animation. Just use the Observer Plugin and then create a ScrollTrigger that let's you know that the Observer instance has to be enabled again, just in case you want to run that animation on scroll up after is completed. If you don't, then you can just forget about the Observer once the animation is completed.

 

I updated the codepen example:

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

 

Hopefully this helps.

Happy Tweening!

[Israr]

Thanks a bunch @Rodrigo that works!