Jump to content
Search Community

Animate multiple circles along multiple paths in one direction

Kerry test
Moderator Tag

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

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

Link to comment
Share on other sites

Welcome to the forums, @Kerry

 

The main problem is that your SVG artwork isn't set up correctly - those look like lines but they're actually filled shapes. In other words, instead of there being a single path running down the center of each line (stroked), you've got outlined shapes (almost like thin rectangles that are joined). That's why it seems like yoyo:false isn't working - it's just that the circles are following the outline of the shape which goes down and back up again on the other side. It's not yoyo-ing. 

 

Once you clean up the SVG artwork so that it's simple stroked paths, I can help you with significantly reducing the amount of code necessary to do the animations. You can use a function to do the repetitive work.

 

As for the offsets, you probably don't need to set any offsets at all - just set this on each circle:

TweenMax.set("#circle-1, #circle-2, #circle-3, #circle-4", {xPercent:-50, yPercent:-50, transformOrigin:"50% 50%"});

 

The xPercent/yPercent make it shift over and up by half the width/height of the shape itself. The transformOrigin just ensures that transforms take place from the center of the shape. 

 

Hope that helps. 

  • Like 4
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

In cases like this I prefer to get 1 thing right before working on 4. Reducing the problem to the smallest amount of code makes things much easier to read and understand.

 

By aligning the path data to your circle you don't have to worry about calculating those offsets.

Once you get the path data (which is an Array of points) you can reverse() it before feeding those values to the BezierPlugin

 

var bezierData1 = MorphSVGPlugin.pathDataToBezier("#path-1", {
    align:"#circle-1"
    }).reverse();

 

See the Pen ypBEMV?editors=1010 by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Using a loop, you can cut down on your code considerably

 

var tl = new TimelineMax({repeat:-1});
$(".paths path").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, 6, {
    bezier: {
        values:bezData, type:"cubic"
    }}, 0)
})

 

Note: I wrapped all your <path> elements in a <g class="paths"> so that adding other paths in the future won't blow up the js code.

 

See the Pen GyKGLg?editors=1010 by GreenSock (@GreenSock) on CodePen

 

  • Like 4
Link to comment
Share on other sites

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

 

circles.png

Link to comment
Share on other sites

I've been wondering what you guys were trying to do. Every demo here looks so FUBAR!!!

 

All the demos here are using an old version of GSAP, 1.18.0. GSAP is applying a 3D matrix to the element's inline style, which is causing a conflict if the Experimental Web Platform feature is enabled in Chrome or Opera.

 

Updating to the latest version of GSAP fixes the problem. It correctly applies a 2d matrix to the transform attribute. It took me forever to figure that out. :roll:

 

  • Like 3
  • Haha 1
Link to comment
Share on other sites

2 hours ago, Kerry said:

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

 

Sure. Here's a variation that creates 5 different timelines for each circle, which should be running at different speeds.

 

See the Pen dJXeXm?editors=0010 by osublake (@osublake) on CodePen

 

 

 

  • Like 1
Link to comment
Share on other sites

Hi @Kerry,

 

Your visualization of the topic is great: clear concept, comprehensible animation. To randomise the speed makes it more dramatic.

But: Why should the 'data of a section' go through the same 'tool' every time?

 

@OSUblake: I could only build the paths. The random part for the beziers is too much for me. Please help out ...

 

See the Pen ba72bf398a25631c1372d0946214c373 by mikeK (@mikeK) on CodePen

 

Kind regards

Mikel

  • Like 1
Link to comment
Share on other sites

2 hours ago, mikel said:

 

@OSUblake: I could only build the paths. The random part for the beziers is too much for me. Please help out ...

 

Having a good understanding of arrays will make this easier to understand. Beforehand, I create an array of arrays that hold the different path variations. So the structure looks kind of like this.

 

var pathLists = [
 [
   [startPath1 + randomAltPath],
   [startPath1 + randomAltPath],
   [startPath1 + randomAltPath],
   [startPath1 + randomAltPath],
 ],
 [
   [startPath2 + randomAltPath],
   [startPath2 + randomAltPath],
   [startPath2 + randomAltPath],
   [startPath2 + randomAltPath],
 ],
 [
   [startPath3 + randomAltPath],
   [startPath3 + randomAltPath],
   [startPath3 + randomAltPath],
   [startPath3 + randomAltPath],
 ],
 [
   [startPath4 + randomAltPath],
   [startPath4 + randomAltPath],
   [startPath4 + randomAltPath],
   [startPath4 + randomAltPath],
 ]
]

 

The random alternate paths are shuffled, so there will only be 1 circle going down a certain path at a time. However, that will only happen if the duration/speed is the same for each circle for every path variation. By using a random duration for each circle/variation, there is a possibility that a fast moving circle could catch-up to a slow moving circle, and head down the same path.

 

Eliminating that possibility completely would require more code and logic, but we can reduce that possibility by reducing the range of the random duration. Instead of using a large range, like random(1, 5), use a smaller range like random(1.5, 2).

 

See the Pen jYMVNM by osublake (@osublake) on CodePen

 

 

  • Like 5
Link to comment
Share on other sites

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
Link to comment
Share on other sites

Hi @OSUblake,

 

Fantastic! Every line, every detail is worth studying.

So please use the full screen mode and your biggest touch screen ...

 

See the Pen e20942a078a93465cd936ffffdc22780 by mikeK (@mikeK) on CodePen

 

Kind regards

Mikel

 

Hi @Kerry,

I thought QUANDL would be your construction site.

Nevertheless, this case is a fantastic challenge.

  • Haha 2
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...