SVG morph with MagicScroll

[a2zk]

Hello All,

I'm new here, and to web-animations. I am attempting to morph an svg as a user scrolls through a page. I have the svg paths set up and they morph correctly on their own in 

See the Pen yLNEJNg by a2zk (@a2zk) on CodePen

 code. (Sorry I dont know how to link external js links, so the libraries wont work...)

But I am struggling with setting up a Tween to accomplish the morph, as the function cannot be used inside of a Tween (I have discovered).

With some guidance on the forms I found this line: 

new TweenMax.to("#blob1",3,{attr:{d:"M463.43,364.65c62.09,32.87,85.73,29,96,20,17.85-15.66-4.09-49,13-99,10.37-30.38,36-69.54,63-69,27.89.56,28.38,42.76,68,58,44.81,17.24,79.87-23,110-2,24.55,17.14,16.7,54.65,34,58,14.81,2.87,22.31-24.27,57-47,28.13-18.43,67.7-29.75,79-17,11.91,13.44-16.6,43.47-4,62,15.47,22.75,73.9.23,80,14,7.9,17.83-84.2,69-76,88,4.52,10.5,33.39-3.12,70,14,4.89,2.29,38.51,18.62,50,54,1.28,3.94,11.26,34.65-2,46-15.64,13.39-49.69-12.11-58-2-7.61,9.26,19.81,32,24,74,2,20.32-1,48.89-12,52-15.05,4.26-27.76-44.2-78-70-21.94-11.27-48-16.66-52-10-7.23,12.16,65.1,54.71,56,78-5.47,14-39.57,19.08-67,10-48.84-16.16-64.32-73.16-81-68-12.19,3.77-2.73,33.84-24,56-18.26,19-52.25,25-64,13-11.42-11.69,7.09-31.34-1-64-7-28.22-31.21-55.56-50-53-4.49.61-12.52,3.06-35,46-27.73,53-27,61.37-38,66-22.53,9.46-54.15-13.65-82-34-33-24.13-31.31-33.89-52-42-41.89-16.41-81.3,10.91-88,0-8.51-13.85,58.88-51.54,52-86-7.36-36.84-90.83-26.07-114-76-15.27-32.91-3.33-90,36-105C402.08,318.72,440,332.11,463.43,364.65Z"}});

 

It successfully changes the svg path at the end of the trigger section, but will not animate from the smaller shape, up. Wondering if there is a better way to transition to a path inside of a Tween (I just dont know the extent of what you can do with them yet...).

 

Would appreciate any insight, sorry for the lack of functionality in the links. (If anyone knows how to link external files... lemme know).

See the Pen qBdKZMp by a2zk (@a2zk) on CodePen

[a2zk]

The lower window is the full code for what I am trying to achieve.

[ZachSaucier]

Hey a2zk and welcome to the GreenSock forums.

 

Thanks for the demo! You can include JS libraries by clicking the cog next to the JS label. 

 

ScrollMagic isn't a GreenSock product and we don't really recommend using it. Here's a basic approach of how to do something like this without ScrollMagic:

See the Pen GRJGqMR?editors=0010 by GreenSock (@GreenSock) on CodePen

 

However, this likely isn't the effect that you want. Since you have a different amount of points, you should use GSAP's MorphSVGPlugin which handles this for you! It also fixes a lot of cross-browser bugs that you may run into.

See the Pen NWqzrXb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Also notice that I upgraded you to GSAP 3. It has a smaller file size, a bunch of new features, and a sleeker API. 

[a2zk]

Thank you so much! I don't have the money to spend on a Club Membership at the moment but I do see the benefits.

I'll edit the small svg to have the same points and then it should work out!

 

Thanks again!

[Shrug ¯\_(ツ)_/¯]

33 minutes ago, a2zk said:

I don't have the money to spend on a Club Membership at the moment but I do see the benefits.

 

You can try and play around with all the GreenSock Club plugins here, which you may already know.

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

 

If you ever do one day choose to become a memeber you will easily see the full benefits as most users realize it easily pays for itself in the first week or project. 😉

[a2zk]

If I wanted to do this multiple times on one page, how would I set up the triggers?

Right now I have two separate timelines with similar animations that I would like to trigger when I scroll to them.

The first is working fine. But the second will not trigger even though I created new triggers.

Is there a way for me to delay the next animation on a timeline by scroll distance? I guess I would still need separate triggers.

 

Here's the pen with the relevent code.. 

See the Pen xxGzBmQ by a2zk (@a2zk) on CodePen

 

[ZachSaucier]

Make sure you take time to understand the code that we're helping you with. You won't learn nearly as much if you're just changing values without knowing what's going on. Doing so will also cost you more time in the long run even though it might save you a little time up front.

 

The approach I demoed above goes through the entire timeline's progress in the span of the scroll distance (in this case the duration of 300). So you adding a second tween to the timeline of equal duration to the first makes the effective duration of both half of what it should be. If you added another tween of the same duration then the duration for each tween would be 1/3 of what the duration variable actually is. 

 

To avoid that, you could either 

1. Create different timelines and listeners for each section you want scroll effects for (probably more optimal). 
2. Change the way the progress is calculated to correctly reflect the new duration. This only works because the elements are right next to each other in your case. If they were at different parts of the page you'd need to use the first approach.