Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
foxhound3311

MorphSVGPlugin is not defined

Recommended Posts

Hey guys,

 

I created an SVG animation that should trigger when the user scrolls. I achieved this using Scroll-magic. The issue i'm having is the MorphSVGPlugin is giving me a console error saying it's not defined. I assume it has something to-do with scroll magic because i have never had issues with it in the past.

 

Could someone take a look and see what i did wrong?

See the Pen WjzJQL by stinkytofu3311 (@stinkytofu3311) on CodePen

Link to post
Share on other sites

Hi @foxhound3311 :)

 

I'm not seeing any 'not defined' errors, but I'm seeing an easing error. You've got this on lines 24 and 25:

 

.to("#rect3720", 0.2, {fill:"#58a500", repeat:5, Linear, delay:0}, '-=1.0')
.to("#rect3729", 0.2, {fill:"#ff0000", repeat:5, Linear, delay:0}, '-=1.0')

 

I'm assuming you were adding ease:Linear.easeNone to that, but missed part of it. Once I removed that, all the errors went away. Just an FYI - you're using a really old version of GSAP (1.14.2) which is almost 3 years old now. You should be using 1.19.1. ScrollMagic is also up to 2.05 now. For Club plugins on CodePen, this is a good pen to bookmark:

 

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

Another little tip: If you're using the same ease several times, you can define a new default like this:

TweenLite.defaultEase = Linear.easeNone;

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 1
Link to post
Share on other sites
20 minutes ago, PointC said:

Hello Craig,

Thank you for the quick reply. I did not even know i had the linear wrong. I appreciate it. I'm still having a Uncaught ReferenceError: MorpgSVGPlugin is not defined.

 

If you look at this example of the animation without scroll-magic you can see that the paper that leaves the printer expands its shape. The error i'm receiving is stopping this affect.

See the Pen KmQWKP by stinkytofu3311 (@stinkytofu3311) on CodePen

Quote

 

 

I'm not seeing any 'not defined' errors, but I'm seeing an easing error. You've got this on lines 24 and 25:

 


.to("#rect3720", 0.2, {fill:"#58a500", repeat:5, Linear, delay:0}, '-=1.0')
.to("#rect3729", 0.2, {fill:"#ff0000", repeat:5, Linear, delay:0}, '-=1.0')

 

Here a screenshot of the Errors.

2mwsbaq.png

 

 

 

Link to post
Share on other sites

hmmm... that's strange. I'm not seeing that error. Let's try this  -- here's a fork of your pen with a couple script changes.

See the Pen pPLOeM by PointC (@PointC) on CodePen

It's working fine for me in all browsers. Is it working for you?

 

  • Like 2
Link to post
Share on other sites

Ahh. Did you change the actual plugin scripts to newer versions? It's working as i imagined now. Now all i have to-do is add 3 more animated SVG icons in a row one after another. I can't wait to figure that out. :P I spent 5 hours today working on this little guy. I am K.O.'d.

 

Thanks so much.

  • Like 1
Link to post
Share on other sites

Happy to help. :)

 

Yes - I just made certain all the plugins were the latest version along with GSAP 1.19.1 and then removed that 'Linear' error. I'm glad it's all working correctly for you now. Let us know if you have additional questions going forward.

 

Happy tweening.

:)

  • Like 2
Link to post
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.

×