Jump to content
GreenSock

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

I am testing GSAP with this setup: html, css, js, CDN files and a 'scripts' folder.

Go to solution Solved by SteinarvDesign,

Recommended Posts

  • Solution

I have recently become a Club GreenSock member -  ShockinglyGreen, and have installed the GSAP bonus plugins on my computer.
I am testing GSAP with this setup: html, css, js, CDN files and a 'scripts' folder.

For testing I am using the code in 'Toggle button with javascript svg animation' by @fitzsyke 'Artem' on codepen .

 

I am using these scripts in the html file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js" integrity="sha384-..."crossorigin="anonymous"></script>
<script src="./scripts/MorphSVGPlugin.min.js"></script>
<script src="./scripts/CustomEase.min.js"></script>

 

There is a problem with:
const morphSVGPlugin = MorphSVGPlugin;  - in the js file and morphSVGPlugin.pathDataToBezier - also in the js file
Here is the error:
script.js:40 Uncaught TypeError: morphSVGPlugin.pathDataToBezier is not a function

What is causing this problem ?
 

See the Pen QzMMVJ?editors=1010 by fitzsyke (@fitzsyke) on CodePen

Link to comment
Share on other sites

That demo is kind of old, and the API has changed a little since then. Instead of pathDataToBezier, you should use the MotionPathPlugin. And be sure to check out the Migration Guide for all the other changes.

  • Like 2
Link to comment
Share on other sites

If you're just trying to test your set up - it might help to start off with an up to date pen from our docs.

 

If you're looking to use morphSVG, maybe this one would be a good starting point?

 

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

  • Like 2
Link to comment
Share on other sites

Also, hooray! 🥳

Welcome to club GreenSock and thanks for your support. We appreciate it.

  • Like 2
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.
×