Jump to content


Morph + xlink

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

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.



Thiago Lagden

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

Link to comment
Share on other sites

<use> elements are encapsulated, so you're really limited with what you can change for each instance. Basically CSS related stuff...



I'd just put what you want to reuse in some defs and clone them.   

  • Like 3
Link to comment
Share on other sites

  • Solution


I thought that we'd simple solution!

I already knew about use with css, because I did a 

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

 like Google Material Design using GSAP.


So, I did cloning SVG element and the result was good:

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



Thanks for reply @OSUblake



  • Like 2
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'));

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


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.