Jump to content
Search Community

SVG path without snap.js or Bezier?

rgfx test
Moderator Tag

Go to solution Solved by Diaco,

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

Do I really have to load another library just to animate along the path. Can carl's stroke animation example be used? http://codepen.io/rgfx/pen/cusav  I have it set to 25% width works great. 


What am trying to do is something like the progressive reveal dots example but have it be responsive. http://codepen.io/GreenSock/details/ABkdL/


And while am at it able to figure out how to animate along a path responsively as well, without another library.


Slowing building up my responsive animation tools, thanks for everybody's help, can't wait to get to production mode.

See the Pen zLiux by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

I'm not really following the question. Not sure what you mean about loading another library. Only GSAP is used for the line-drawing effect. 

I'm still learning some things about SVG myself, but being responsive should be fairly straightforward as they scale really well.



Also, be sure to follow the conversation here: http://greensock.com/forums/topic/10688-challenge-convert-svg-path-to-bezier-anchor-and-control-points/

 and look at the demos. 


Using those examples you should be able to use a similar approach to http://codepen.io/GreenSock/details/ABkdL/where you move the object along the tween, get they x/y coordinates and then drop DOM or SVG elements to create dots.

Link to comment
Share on other sites

I do not want to animate a stroke, I want to follow a svg path. Your example was the only one that didn't use snap.js or bezier, perhaps its only for animating strokes. I could use bezier but I do not think its responsive, is it?


By library I mean using snap.js or raphael etc, I rather just use gsap. Wondering if its possible. 


Thanks for your time. 

Link to comment
Share on other sites

Hi rgfx :)


u can make responsive behavior with css , javascript (media query) or on Win resize conditions , i think this isn't about GSAP
in your case , since bezier use x,y values , it's simplest way that append the dots in a container , not body and change scale of container on win resize .
  • Like 1
Link to comment
Share on other sites

Diaco, are you saying that should create different sets of bezier x and y values. I will have to change the scale of the container size using fixed width, not percent? Certainly not ideal.


Append dots to a container works for starting point, but prevents me from filling my container with an effect.  

See the Pen hcniu by rgfx (@rgfx) on CodePen


Here is an example of an responsive svg path using snap.js 

See the Pen vdEbg by mattsince87 (@mattsince87) on CodePen


Was hoping just to use gsap for everything :)

Link to comment
Share on other sites

  • Solution

Hi again :)


try something like this : 

See the Pen aCKwH by MAW (@MAW) on CodePen


  function Resize() {
    var $window = $(window) ,
        maxWidth  = $('.c').width() ,
        width = $window.width(),
    if( width >= maxWidth ) { return } // U can remove this line if you want always container fit to screen 
    TweenMax.set('.c',{scale: Math.min(width/maxWidth),transformOrigin:"0% 0%"});
Link to comment
Share on other sites

Hello rgfx, Try this for responsive.. i forked and edited Diaco.AW example.


And nice Job Diaco.AW .. the resize event wasn't firing, looks like you would just need to reverse your logic in your IF condition.


I modified your example, try resizing the browser:

See the Pen umFzc by jonathan (@jonathan) on CodePen


// was this
if( width >= maxWidth ) { return }

// change to this
if( maxWidth >= width ) { return }


Or you can take all restraints off:


See the Pen oeFfI by jonathan (@jonathan) on CodePen


Hope this helps! :)

Link to comment
Share on other sites

Sweet, thanks a lot guys. I am come from design background, truly appreciate you guys helping me, and forgiving my ignorance. I will learn js, how long it will take, who knows. Blasting my way through codecademy.com, anything else you can recommend, specifically to create awesome front-end?

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