How to draw a vector path progressively? (Raphael.js)

by

Maybe someone is searching for an answer, like me for two days now:

// Draw a path and hide it:
var root = paper.path('M0 50L30 50Q100 100 50 50').hide();
var length = root.getTotalLength();

// Setup your animation (in my case jQuery):
element.animate({ 'to': 1 }, {
    duration: 500,
    step: function(pos, fx) {
        var offset = length * fx.pos;
        var subpath = root.getSubpath(0, offset);
        paper.clear();
        paper.path(subpath);
    }
});

That did the trick for me, only by using RaphaelJS methods.

Here is a jsFiddle example as requested in the comments, http://jsfiddle.net/eA8bj/

More Related Contents:

  1. SVG trigger animation with event
  2. Can’t make paths draw growing slowly with D3
  3. Change Background Color & Font Color Automatically Via CSS [closed]
  4. How to fade animate background images (full size) [closed]
  5. Convert SVG to image (JPEG, PNG, etc.) in the browser
  6. jQuery SVG, why can’t I addClass?
  7. How to add a tooltip to an svg graphic?
  8. Creating SVG elements dynamically with javascript inside HTML
  9. How to prevent an HTTP request just for a favicon?
  10. CSS3-Animate elements if visible in viewport (Page Scroll)
  11. Embedding SVG into ReactJS
  12. Label outside arc (Pie chart) d3.js
  13. Performance of CSS Transitions vs. JS animation packages
  14. How do I rotate a single object on an html 5 canvas?
  15. Where is d3.svg.diagonal()?
  16. Load event not fired on Safari when reloading page
  17. CSS Animation onClick
  18. Plotting points on a map with D3
  19. How can I animate a progressive drawing of svg path?
  20. How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
  21. SVG to Canvas with d3.js
  22. How to show SVG file on React Native?
  23. JQuery – animate moving DOM element to new parent?
  24. Display an arrow head in the middle of D3 force layout link
  25. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  26. Body animation isn’t smooth
  27. SVG get text element width
  28. How do I dynamically insert an SVG image into HTML?
  29. visibility:hidden vs display:none vs opacity:0
  30. How to use requestAnimationFrame?

Leave a Comment