bullybear Posted September 21, 2021 Share Posted September 21, 2021 (edited) I built an animated svg using the morphsvgplugin (I pay x dollars a month to have access to this package). The attached html file should look like the accompanying codepen . However, when I run it locally, nothing populates. The code in the attached html example is slightly different than the codepen (which works fine) - Essentially the cdn script libraries in the html file are more recent, and I replaced MorphSVGPlugin.pathDataToBezier with MotionPathPlugin.getRawPath Any help would be immensely appreciated. greensockexample.html See the Pen qBmgVoP by bullybear (@bullybear) on CodePen Edited September 21, 2021 by bullybear Made more specific & clear. Link to comment Share on other sites More sharing options...
OSUblake Posted September 21, 2021 Share Posted September 21, 2021 Welcome to forums @bullybear You're going to have be more specific than it's not working. Do you see any errors in the console? That CodePen is using a very old version of GSAP, so I wouldn't expect it to work, especially with the MorphSVGPlugin as it's calling pathDataToBezier, which doesn't exists anymore. I would suggest going through our Mirgration Guide, and updating everything to latest syntax before continuing. Link to comment Share on other sites More sharing options...
GreenSock Posted September 21, 2021 Share Posted September 21, 2021 Thanks for being a Club GreenSock member, @bullybear! 🙌 Are you just asking how to migrate that old code to the more modern GSAP 3 syntax? Link to comment Share on other sites More sharing options...
bullybear Posted September 21, 2021 Author Share Posted September 21, 2021 @GreenSock Yes I am. I have refined my post from earlier so it is easier to follow. Any help would be immensely appreciated. Link to comment Share on other sites More sharing options...
bullybear Posted September 21, 2021 Author Share Posted September 21, 2021 @OSUblake I tried making me question more specific. Please let me know if this helps (and no - no errors in the console). I really appreciate it. Link to comment Share on other sites More sharing options...
PointC Posted September 21, 2021 Share Posted September 21, 2021 You can get rid of this as you're already loading gsap. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script> Did you register the plugin? gsap.registerPlugin(MotionPathPlugin, MorphSVGPlugin); 2 Link to comment Share on other sites More sharing options...
OSUblake Posted September 21, 2021 Share Posted September 21, 2021 Here's something to get you started, so you should be able to work the rest out. If you don't see anything, it's because of how you have SVG set up. You need to shrink the screen height down. https://codesandbox.io/s/stupefied-wood-pjzog?file=/index.html 1 Link to comment Share on other sites More sharing options...
bullybear Posted September 21, 2021 Author Share Posted September 21, 2021 @PointC Thanks for responding. No I did not! When I added that line into my js code I still didn't see anything though .. Link to comment Share on other sites More sharing options...
GreenSock Posted September 21, 2021 Share Posted September 21, 2021 Here's the pen ported to GSAP 3 and MotionPathPlugin: See the Pen LYLrdWj?editors=0010 by GreenSock (@GreenSock) on CodePen Is that what you're looking for? 1 Link to comment Share on other sites More sharing options...
bullybear Posted September 21, 2021 Author Share Posted September 21, 2021 @OSUblake that worked! thank you so very much! 1 Link to comment Share on other sites More sharing options...
bullybear Posted September 21, 2021 Author Share Posted September 21, 2021 @GreenSock that's perfect. thank you!! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now