• Content count

  • Joined

  • Last visited

Community Reputation

2 Newbie

About Kerry

  • Rank
  1. Hi @mikel, This is my first animated svg with js. Just wanted something fairly simple like 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.
  2. OK @OSUblake , Care to share the updates / fixes or any other suggestions to make this look amazing? Just the last part to wrap up this thread is to randomise the speed of the circles something like
  3. 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();, 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.
  4. 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, Kerry
  5. 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