mechaniac Posted January 15, 2020 Share Posted January 15, 2020 let myCape = document.getElementsByClassName("cape"); let myCapeMorphTarget = document.getElementsByClassName("cape1"); myTimeline.staggerTo(myCape,2,{x:100}) myTimeline.staggerTo(myCape,2,{morphSVG: myCapeMorphTarget}) why does line 3 work, but line 4 gives me: TypeError: 'item' called on an object that does not implement interface HTMLCollection. So i thought I would convert both the objects to arrays with: var myCapeArray = Object.keys(myCape).map(function(key) { return [Number(key), myCape[key]]; }); but then I get: Cannot morph a <UNDEFINED> element. Use MorphSVGPlugin.convertToPath() to convert to a path before morphing. my questions are: what is the difference between calling a transform and a morphSVG on a collection? what is the most efficient way to do this? (including jQuery if necessary) See the Pen JjoBxBQ by mechaniac (@mechaniac) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 15, 2020 Share Posted January 15, 2020 Hey mechaniac, You're loading GSAP 3 but not using any of its features - why is that? GSAP 3 has a .toArray utility method that you can use if you need it, no need to try and map collections to arrays yourself. 51 minutes ago, mechaniac said: what is the most efficient way to do this? (including jQuery if necessary) Definitely not using jQuery, hah. It's very rarely the most efficient way to do things, especially related to animation. It's not clear exactly what you're wanting, but I'd do something like this: See the Pen ExapJgm?editors=0010 by GreenSock (@GreenSock) on CodePen 3 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