Hi all,
I've been working on a site that animates as you scroll (ticking the trend box).
The site uses 'flat' graphical elements with a strong typographic style and I wanted them to be as crisp as possible. Hence the desire to use SVG.
anthonygreco's snapplugin has been great - allowing me to easily tween the SVGs within GSAP .
Here's the site: http://blockhead.alloftheabove.co.uk
However if you're viewing it in IE you'll notice some issues, one of which I have posted with anthonygreco on Github: https://github.com/anthonygreco/GSAPSnapPlugin/issues/1
I'm just posting this because I threw myself in at the deep end with GSAP and made it harder by choosing SVG. I definitely think they are the way forward, and snap is probably the tool to do it.
I for one would definitely like to see the SnapPlugin developed.
If anyone has any idea what's going on in the Github issue above I'd be most grateful!
Finally - failure13 asked why use SnapSVG, here's my list:
1. Snap allows you to easily work with SVG already in the DOM (Raphael struggles with this - as far as I know you have to use a plugin)
2. Transforming svg child elements has unexpected results when just using GSAP - e.g. scaling with GSAP will keep the SVGs left hand x value whereas snap will scale around the origin of the element. See example pens here: Snap and GSAP
3. Internet Explorer requires a fallback to transform SVG child elements with GSAP - call a function within onUpdate as Rodrigo mentions earlier in this feed. My test: transformX fallback for IE
4. Snap allows you to easily load SVG into the DOM when required.
5. Snap lets you use modern SVG methods such as clipping and masking.
6. And a whole host of other stuff listed on the snapSVG site which I am still waiting to try out.
7. Its way smaller in filesize than raphael