Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ritch.b

I can't get a morph to tirgger with ScrollMagic.

Recommended Posts

Hi All,

 

I'm fairly new to JS, so I'm sure I've made a silly mistake.

 

But I am unable to get a morph tween to trigger using ScrollMagic. What I want to do is fairly simple, I have an svg ribbon made up of three paths, I want to morph the first two into the third as a user scrolls.

 

I've watch and read lots of tutorials, but can't see where I am going wrong.

 

Thank you in advance.

 

Ritch

See the Pen rLyajL by Ritch (@Ritch) on CodePen

Link to comment
Share on other sites

Hi Ritch.b  :)

 

You've got a few things to correct here. First, the morph plugin isn't loaded in your pen. You can load the CodePen version with this link:

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js

The next problem is setting up your timeline:

//switch this
var menurb = new TweenMax();
//to this
var menurb = new TimelineMax();

If you make those changes, you will see a morph-like animation, but I don't think this will give you the results you're probably looking to achieve.

 

Your #combine path is an exact copy of the other two groups only with a black fill instead of blue. The other two groups are made up of 10+ paths with classes of .st0 and .st1. You're animating each of those little paths into your #combine path so this isn't ideal. As I mentioned, you'll see a something happening, but it looks more like a jumbled blob than an actual morph. MorphSVG works path to path so you want a corresponding end path for each start path to get a nice animation. 

 

Your SVG is a bit confusing too. You've got classes of .st0 and .st1 as well as group IDs of #st0 and #st1 so it's a bit hard to follow. The .st0 class is also applied to the #combine path and then you're morphing the .sto and .st1 class into the #combine path so it's trying to morph into itself. I'd recommend using more meaningful names to make your work a bit easier. I know AI spits out SVGs with generic names like that, but you can fix them manually. With the two start groups having the same shape as the combined end path, I'm not sure what the desired end result is here either.

 

Hopefully this helps a little bit. I'd offer more, but I'm not 100% sure what you're trying to make happen here.

 

Happy morphing.

 

:)

  • Like 1
Link to comment
Share on other sites

Hey thanks so much for the quick response, I'll give those changes a go and see where I get to.

Link to comment
Share on other sites

Thanks,

 

You're right about the morph - The route I am going to take is to fade out the #st0 and #st1 layers - leaving the #combine layer which I will then morph into another shape. But before I do that I need to get the morph to work on scroll.

 

I've made the changes above - but now the morph is starting before the trigger is even reached.

Link to comment
Share on other sites

I still didn't see the morphSVG plugin in your demo so you need to add that and you'll need one additional file as well. Click the little gear icon on the JS panel and add each of these to your demo and it all should work correctly. 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js

Note: you may have to add some margin below the SVG so the trigger can be reached on scroll.

 

Hopefully that helps.

 

:)

  • Like 1
Link to comment
Share on other sites

Thank you so much! That's working as I would expect at this point now!

 

But can you explain what animation.gsap.js is doing? I assume its a ScrollMagic Plugin as I've not seen this referenced in any of the GSAP documentation?

 

Thanks again.

  • Like 1
Link to comment
Share on other sites

Yeah, it's not always obvious that you need that file and it seems hard to find sometimes. 

 

It's used to trigger tweens or sync them to the scrollbar. You are correct - it is a ScrollMagic file. Here are the docs. 

 

http://scrollmagic.io/docs/animation.GSAP.html

 

Happy tweening.

 

:)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×