Jump to content
GreenSock

ticktockreed last won the day on September 27 2014

ticktockreed had the most liked content!

ticktockreed

Members
  • Posts

    4
  • Joined

  • Last visited

  • Days Won

    1

ticktockreed last won the day on September 27 2014

ticktockreed had the most liked content!

ticktockreed's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges

8

Reputation

  1. ticktockreed

    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!
  2. ticktockreed

    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: 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
  3. 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!
  4. 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 http://codepen.io/rhernando/pen/kjmDo Progressively reveal dots on Bezier curve http://codepen.io/GreenSock/pen/297827d7dd99d0eb44f96b6b75328338?editors=001 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. http://codepen.io/ticktockreed/pen/dBarw?editors=001 Do you know how to access the current point values on a quadratic bezier? Most grateful of any help! Thanks, Tim
×