Jump to content
Search Community

Save Timeline Contents and Restore From File

swampthang test
Moderator Tag

Recommended Posts

6 hours ago, swampthang said:

The eases are preserved but you can see they are passed in as something like this:

 

I noticed that the other day. I remember using strings in my demo. I just thought you weren't using them because it was a quicky demo.

 

See the Pen 7d3275656ef955c5ea2eb121c2407ba6 by osublake (@osublake) on CodePen

 

 

And in v3, string support is much better. The names are shorter, and you can use parameters with strings.

 

// Still works
ease: Elastic.easeOut.config(1.1, 0.4)});

// Smaller
ease: "elastic.out(1, 0.3)"

// Even smaller! out is the default type
ease: "elastic(1, 0.3)"

 

4 hours ago, Shrug ¯\_(ツ)_/¯ said:

This thread is really interesting subject matter and has been intriguing to read.

 

Then you might like this thread.

 

 

 

  • Thanks 1
Link to comment
Share on other sites

Here's a VERY SIMPLE test. This was exported from the app....

See the Pen abOBeKp?editors=1010 by swampthang (@swampthang) on CodePen

 

You can use the svg as a file (without having to inline it in the html) using an object tag. An img tag won't work - won't animate. Do it like:

<object type="image/svg+xml" data="test.svg"></object>

 

Link to comment
Share on other sites

Preface this by saying this isn't a GSAP question but I've spent 2 days trying to figure this out. If I had hair it would all be gone by now.

 

Does anyone know how to dynamically add an img element to a foreignObject in an SVG without the closing tag being removed? For an inline SVG it doesn't seem to matter but if you view the svg itself in the browser, it complains about missing the closing tag for an img. I'm dead in the water on all the above if I can't figure this out. Just hoping for some mercy here.

 

Stack overflow is void of good info on this.

 

Link to comment
Share on other sites

@OSUblake this is a very simple codepen. I've tried using an xml string to create the img and forcing a closing tag like: <img src="source" /> but when it gets added, the closing "/" always gets stripped out. If you then take that svg outerHTML and create an svg file with it and try to open that in a browser, you get the following error:

This page contains the following errors:

error on line 2 at column 154: Opening and ending tag mismatch: img line 0 and div

Below is a rendering of the page up to the first error.

If you add back the closing tag to the img, it works fine. I just have to figure out how to do that dynamically.

See the Pen NWqdMzo?editors=1010 by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

That's very strange. The only way I could get it to work is by manually doing it.

 

<svg id="main" version="2.0" xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
	<foreignObject id="fo" width="300" height="300">
		<div id="wrapper" xmlns="http://www.w3.org/1999/xhtml"></div>
	</foreignObject>
	<script>
		var wrapper = document.querySelector("#wrapper");
		var img = new Image();
		img.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/81395/ball.png";
		wrapper.appendChild(img);
	</script>
</svg>

 

I guess you could use css background image instead. You just need to make sure there is a width and height on the element.

 

And why are you trying use the svg as a file?

 

 

Link to comment
Share on other sites

5 hours ago, OSUblake said:

That's very strange. The only way I could get it to work is by manually doing it.

Thanks, Blake. Yea, it's strange alright. 

5 hours ago, OSUblake said:

And why are you trying use the svg as a file?

Wanting to be able to export a self-contained SVG with animation like the one attached.

test2.svg

Link to comment
Share on other sites

36 minutes ago, swampthang said:

Wanting to be able to export a self-contained SVG with animation like the one attached.

 

What's wrong with a self contained html file? Or is it so you can add multiple animations to a page using this?

<object type="image/svg+xml" data="test.svg"></object>

 

Link to comment
Share on other sites

1 hour ago, OSUblake said:

What's wrong with a self contained html file? Or is it so you can add multiple animations to a page using this?

Yea, it needs to be a file that someone can place anywhere they like using the object tag. But, given the fact that I have to save it as a string to a file, I should be able to use a regex to assure all img tags are closed by parsing the string just before it gets written to the file.

 

Thanks again for the help on this.

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