Jump to content


  • Posts

  • Joined

  • Last visited

Everything 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.
  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 https://www.quandl.com/#ember626
  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(); 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.
  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 https://www.quandl.com/#ember620