Jump to content
Search Community

Coordinating opacity and viewBox tweens

swampthang test
Moderator Tag

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

What are you using right now? This is a pretty good one for SVG foreignObject export...
http://cburgmer.github.io/rasterizeHTML.js/
 
html2canvas is faster than the SVG method, but there are some limitations. It renders content based on DOM properties it understands, so it may not recognize some of the newer CSS properties. Somebody has to program in how it should render any new CSS properties. And it can't render iframes.  
 
Limitations asides, it does render on a canvas which means you run it through a canvas library like Pixi, which has a ton of filters...
http://pixelscommander.com/polygon/htmlgl/demo/filters.html#.WFmp8-fQeUk
 
Also, Chris Gannon just made an animation exporter based on html2canvas. You might want to check that out.
https://github.com/chrisgannon/SVG2GIF

 

.

Link to comment
Share on other sites

I'm surprised you were able to get it working with my code as it really wasn't setup to work with SVG, or regular HTML elements for that matter. This kind of stuff is real easy to do with canvas, but DOM elements can be a real challenge.
 
Maybe it's time to look at Paper.js again. That's the type of library that would work well for the type of stuff you are making. It would also make converting your animations easier as it can render stuff without a browser view (i.e. in node.js or a webworker).
 
I started playing around with that idea...  
 
xEYevuB.png
 
 
:D  :P  ;)  :-D
 
Now that's nice looking! 
 
I was thinking that it would be cool if you could see the layout being constructed while you type. I'll finish that another day, but you can check out what I've done so far.

 

 

See the Pen aed792b678884787f0497cffc41d8518?editors=0010 by osublake (@osublake) on CodePen


 
 
.

  • Like 2
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...