This sample uses Animations and Nodes to give the illusion of a continuous belt. The belt is guided by rollers which it bends around using custom Geometry. It is assumed that the Nodes will be arranged in order going clockwise. When the Nodes are moved around outside this expected order the belt can behave strangely.

Diagram Model saved in JSON format: { "class": "go.GraphLinksModel", "nodeDataArray": [ {"key":"P111", "category":"Roller", "xy":"450 610"}, {"key":"P112", "category":"Roller", "xy":"400 660"}, {"key":"P113", "category":"Roller", "xy":"350 725"}, {"key":"P114", "category":"Roller", "xy":"305 800"}, {"key":"P115", "category":"Roller", "xy":"280 705"}, {"key":"P116", "category":"Roller", "xy":"200 720"}, {"key":"P117", "category":"Roller", "xy":"200 620"}, {"key":"D1", "category":"Drum", "xy":"300 540"}, {"key":"D2", "category":"Drum", "xy":"300 622"}, {"key":"B1", "category":"Belt", "color":"blue", "guides":[ {"k":"D2"},{"k":"P111"},{"k":"P112", "outside":true},{"k":"P113", "outside":true},{"k":"P114"},{"k":"P115", "outside":true},{"k":"P116"},{"k":"P117"} ]}, {"key":"P211", "category":"Roller", "xy":"100 750"}, {"key":"P212", "category":"Roller", "xy":"150 800"}, {"key":"B2", "category":"Belt", "color":"green", "guides":[ {"k":"P211"},{"k":"P116"},{"k":"P212"} ]} ], "linkDataArray": []}

### GoJS Features in this sample

#### Animation

GoJS offers several built-in animations, enabled by default, as well as the ability to create arbitrary animations.

The Diagram.animationManager handles animations within a Diagram. The AnimationManager automatically sets up and dispatches default animations, and has properties to customize and disable them. Custom animations are possible by creating instances of Animation or AnimationTrigger. More information can be found in the GoJS Intro.

Related samples

#### Geometry Path Strings

The GoJS Geometry class controls the "shape" of a Shape, whereas the Shape.fill and Shape.stroke and other shape properties control the colors and appearance of the shape. For common shape figures, there are predefined geometries that can be used by setting Shape.figure. However one can also define custom geometries.

One can construct any Geometry by allocating and initializing a Geometry of at least one PathFigure holding some PathSegments. But you may find that using the string representation of a Geometry is easier to write and save in a database. Use the static method Geometry.parse or the Shape.geometryString property to transform a geometry path string into a Geometry object.

More information can be found in the GoJS Intro.

Related samples