Jump to content
Search Community

Standalone svg with GSAP

FunkiePhil test
Moderator Tag

Recommended Posts

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

1 hour ago, FunkiePhil said:

Hi all,

 

it's all in the title basically: is it possible to make a standalone svg with GASP animations?

 

thanks

 

Philippe

By standalone, you mean outside a HTML page, I guess? 

 

I would say no, as GSAP is JavaScript, and it needs a browser to be run. But maybe there is a solution depending on where you want to view/present the SVG, you would need to give more details, though. 

Link to comment
Share on other sites

I doubt you can get this to work. SVG used to have a lot of fancy scripting functionality, but it was mostly deemed unsafe and is not interpreted by browsers. If full JavaScript execution as you would need it was ever possible—I doubt it.

 

A self-contained HTML instead of an SVG is not an option?

Or if the animations you require are not too complex you can go for CSS animations, those work inside SVG.

Link to comment
Share on other sites

1 hour ago, FunkiePhil said:

I guess a self-contained html would do. How can I do it?

Technically, you would have to start by copying all the needed gasp files in script tags in the head. I'm uncertain if the license allows for that, might depend on the use case. 

 

You should ask the staff, if that's ok first I guess.

Link to comment
Share on other sites

14 hours ago, iDad5 said:

Technically, you would have to start by copying all the needed gasp files in script tags in the head. I'm uncertain if the license allows for that, might depend on the use case. 

That's totally fine. There are no such restrictions. 

 

Also, I think you can embed JavaScript directly in SVG files. A quick Google search returned: http://thenewcode.com/1094/Using-JavaScript-in-SVG

 

I believe I did that myself years ago. Just had to do the //<![CDATA[  wrapper like the article says.

 

You could copy the GSAP file contents into a script tag and then directly under the GSAP code, write your custom code. I assume that'd work. But it's probably a lot easier to do the <script xlink:href="external.js" /> thing if you can get away with it (again, see the article). 

 

Good luck!

  • Like 1
Link to comment
Share on other sites

In my experience the support for script inside SVG is very tricky, and browsers at handling it inconsistent. But I have to admit, that I always decided very soon not to go down that route after first tests. 
But it is great that @GreenSock have green light to try it every way you want to! 
Good luck! 

Link to comment
Share on other sites

I'd dispute this (but also open to be corrected, SVG can be a little wonky sometimes)

I don't know of any browser inconsistencies for using JS in SVG. You can't use modules but JS is fine. 

You have to be aware that you're in SVG-land so certain HTML specific web API's or methods like .getBoundingClientRect won't work, maybe that's what tripped you up @iDad5? But you have SVG methods like .getBBox so it's not the end of the world.

lil' demo for testing

See the Pen dyjEvJp?editors=1100 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

Well it’s been a while, that I seriously tried, but as far as I remember there have been several browser inconsistencies, mainly Safari not doing things the same way as Firefox. 
Chrome on the other hand would ingnore transforms set by js and cloning nodes was impossible. Or I was simply not capable of doing it right. 
 

But maybe all of those issues have been fixed a long time ago. And won’t matter in the OPs usecase anyhow.
 
I stand corrected. 

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