Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by Kerry

  1. Hi @mikel,


    This is my first animated svg with js. Just wanted something fairly simple like https://www.quandl.com/#ember626 where the circles are representative of data flow in one direction to one source. The more random it appears the better (in a visual sense). So overtaking (circles) would be cool.


    I may apply a pulse / opacity / scale effect through CSS but this would be static timing on each circle element.


    @OSUblake thanks that is what I am after. Maybe just a little bit slower. Thanks again.



    • Like 1
  2. Getting very close now @Carl. Your refactoring looks sweet.

    I tried tweaking your script attempting to make the speeds different for each circle but they seem to get stuck at the end (bottom) of each cycle (see pic).

    var tl = new TimelineMax({repeat:-1});
    $(".st0").each(function(index, element){
      var circle = $("#circle-" + (index + 1));
      TweenMax.set(circle, {xPercent:-50, yPercent:-50, transformOrigin:"50% 50%"});
      var bezData = MorphSVGPlugin.pathDataToBezier(element, {align:circle}).reverse();
        tl.to(circle, 3 + index, {
        bezier: {
            values:bezData, type:"cubic"
        ease:Linear.easeNone}, 0)


    If we can have the circles move at different speeds something like this updated codepen then it should be finished. Thanks again @Carl + Jack.

    See the Pen baNVGE by Kerrys7777 (@Kerrys7777) on CodePen



  3. Jack your observation was exact. I had thought the joined shapes would act as paths. Won't be doing that again.


    I have adjusted the paths as you suggested (above in the codepen). Could still really use your help to reverse the direction to down from the top & reduce the amount of code required.


    It looks like I am declaring the circles to start at the bottom with offsetY: 300,


    The x positions of the top vertical parts of the paths are:
    #path-1        122.5 px
    #path-2        407.5 px

    #path-3        692.5 px

    #path-4        977.5 px


    Thanks again for your help,


    • Like 1
  4. I am trying to run multiple circles along multiple paths. I need some help with:


    - Run animation in one direction (down). I adjusted the yoyo setting to false but it still reverses direction (up)

    - Align the circles with the centre of each path. How are the x y offsets determined?

    - Refactor script. Also do I need to have 4 circle paths?

    - Any suggestions how this could be improved would be awesome. 


    Inspiration taken from https://www.quandl.com/#ember620




    See the Pen mqYzaW by Kerrys7777 (@Kerrys7777) on CodePen