Jump to content
GreenSock

Lagden

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

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

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

https://www.w3.org/TR/SVG/propidx.html

 

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
:cry:

 

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