Jump to content
Search Community

morphSVG on object (array)

mechaniac test
Moderator Tag

Recommended Posts

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

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

  • Like 3
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.
×
×
  • Create New...