[SnapSVG]

"there is no requirement that the start and end paths have the same number of points." - nearly fell of my seat! amazing! Can't wait to try it.

 

Thanks!

[SnapSVG]

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: 

See the Pen qjpuB by ticktockreed (@ticktockreed) on CodePen

 and 

See the Pen hkmDf by ticktockreed (@ticktockreed) on CodePen

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: 

See the Pen yhiHx by ticktockreed (@ticktockreed) on CodePen

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

[Plot elements and / or draw along a bezier path]

Wow thanks for the speedy response Rodrigo!

 

I only just saw your reply - I had notifications turned off.

 

I came to the conclusion that I was barking up the wrong tree with this method and have settled for an SVG with stroke-dasharray to achieve the result.

 

Thanks for your help though - very much appreciated!

[Plot elements and / or draw along a bezier path]

Hi,

Thanks for the amazing set of tools Greensock!

 

I'm also trying to do this, but I would like to draw along a quadratic bezier curve (I need it to be circular).

 

I found these:

 

Circular Bezier

See the Pen kjmDo by rhernando (@rhernando) on CodePen

 

Progressively reveal dots on Bezier curve

See the Pen 297827d7dd99d0eb44f96b6b75328338?editors=001 by GreenSock (@GreenSock) on CodePen

 

 

I forked the last one and adjusted to use a quadratic bezier, however the points cannot be plotted because position.x and position.y is NaN.

See the Pen dBarw?editors=001 by ticktockreed (@ticktockreed) on CodePen

 

Do you know how to access the current point values on a quadratic bezier?

 

Most grateful of any help!

 

Thanks,

Tim