Jump to content


Coordinating opacity and viewBox tweens

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

Thanks, Blake. I've looked at that before and was afraid to use it because of this comment, "...may not be 100% accurate to the real representation..."


Have you ever used it?

Link to comment
Share on other sites

What are you using right now? This is a pretty good one for SVG foreignObject export...
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...
Also, Chris Gannon just made an animation exporter based on html2canvas. You might want to check that out.



Link to comment
Share on other sites

I have it working well enough now I suppose. Still a few little bugs like, occasionally one text block runs into another. Since this is random, it's really tough not to have that happen every so often. It's fairly rare though.

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

Very cool! I'll check that out.


As to getting your classes to work with SVG I did tweak a few things - added an extra function, etc. still not ideal.


So, yea, maybe it's time for me to learn paper.js

Link to comment
Share on other sites

Daaaaaang Blake - I'm liking that!  8-)

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