Jump to content
Search Community

Morph + xlink

Lagden test
Moderator Tag

Go to solution Solved by Lagden,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,
 
I am trying to make a morph using <use xlink:href="#ID">
But I don't know how convert it or if is possible...
 
Here is a normal example:

See the Pen WxNyzO by lagden (@lagden) on CodePen


 
Here is a example using xlink:

See the Pen GqRGoR by lagden (@lagden) on CodePen


 
The expected on second example is:
Morph circle to square when user click on element, but show this message at console: WARNING: cannot morph a <USE> SVG element. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing.

 

Regards,

Thiago Lagden

See the Pen c9e3da6ae27e712b6bf6091935ed4cc2 by osublake (@osublake) on CodePen

Link to comment
Share on other sites

Oh yeah. I remember you asking that question, but now your ripples are broke due to some changes with node lists. I noticed that rest params don't work anymore either.

[...document.querySelectorAll(".btn")].map(el => { //... });

Easy fix though. Use the new Array.from method.

const btns = Array.from(document.querySelectorAll('.btn'));

 

EDIT: Haha! I see you are already using that in your morphing example.

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...