Accessing external SVG file and animating

[Sa`id Abedi]

Hey guys,

 

First Post! Love the GSAP community!

 

I found myself in a bit of a bind. My client is using Webflow to build out their site and I wanted to add a SVG using GSAP for animations.

 

Based on what I have come across the forum I have used the following:

<object id="test" type="image/svg+xml" href="https://firebasestorage.googleapis.com/v0/b/provisioncapital-3bf77.appspot.com/o/how-it-works.svg?alt=media&token=9c1e2099-1d04-4935-a2b0-c5682b91bd99">
<img src="https://firebasestorage.googleapis.com/v0/b/provisioncapital-3bf77.appspot.com/o/how-it-works.svg?alt=media&token=9c1e2099-1d04-4935-a2b0-c5682b91bd99"/>
</object>

Now my main issue is linking the <script>  tag that has my js code that is associated to the SVG.

 

I'm assuming that since my SVG is now an object/image I can not link any external JS scripts that target the internals of the SVG. 

 

Any suggestions would greatly help. 

 

Thanks a bunch

See the Pen yLyNKyr by Said_Abedi (@Said_Abedi) on CodePen

[ZachSaucier]

Hey Sa`id and welcome to the GreenSock forums! We're glad to have you here.

 

5 minutes ago, Sa`id Abedi said:

I'm assuming that since my SVG is now an object/image I can not link any external JS scripts that target the internals of the SVG. 

Correct. It's best to inline SVG directly if you want to animate it. Is this not possible in Webflow?

[Shrug ¯\_(ツ)_/¯]

You might find some usefulness in this old thread. But +1 for inline SVG regarding ease of use.

[Sa`id Abedi]

The only draw back is that webflow has a character limit, so Im forced to save my svg elsewhere. 

[ZachSaucier]

6 minutes ago, Sa`id Abedi said:

The only draw back is that webflow has a character limit, so Im forced to save my svg elsewhere.

In that case you could load it via JS and add it to your page.

[Sa`id Abedi]

Could you point me to a resource that would explain how I could. 

 

[ZachSaucier]

11 minutes ago, Sa`id Abedi said:

Could you point me to a resource that would explain how I could. 

If Webflow runs JS like a regular web page it's the same as loading any file - you could use a fetch request or a XMLHttpRequest. If it doesn't, then you'd have to figure out how its done in Webflow (if it is possible).

[Shrug ¯\_(ツ)_/¯]

Did you have a look at that old thread above, won't work for your case?

 

Otherwise...

 

Here is a basic example:

https://stackoverflow.com/a/22624186

 

There are also libraries available such as these

https://github.com/jonnyhaynes/inline-svg

https://github.com/Gaya/svg-inliner

https://github.com/createlogic/InlineSVG

etc.,