Animations

View it in separate window

Showcase steps

1. Select rect to animate rx attribute
2. Open Animations menu
3. Click Animate attribute icon
4. Set only required properties
5. Select rx attribute
6. Click next
7. Enter animation id
8. Set duration to 5 seconds
9. Syntax 'from-to' is selectedAnd the rx 'to' value is set as the half width by default
10. start animation: select yes
11. Click Add
12. Select circle to animate fill property
13. Select fill property
14. Set 'from' value as 'red' and 'to' value as 'green'
15. Click Add
16. Click Animate attribute icon to edit animate elements
17. Edit rx_animate
18. Set all properties
19. Select repeat count pane
20. Set repeat count to indefinite
21. Click Update
22. Edit fill_animate
23. Change values
24. Select values syntax to add orange between red and green
25. Click Update

View it in separate window

Showcase steps

1. Select element to translate
2. Open animations menu
3. Click 'transform' icon
4. Choose translate type
5. Click next
6. Customize animation id as you want
7. Set duration to 4 secondes
8. Set 'to' tx value to 250
9. Click Add
10. Select another element to rotate
11. Choose rotate type
12. The rotate origin must be set.It's recommended to set it with CSS.It will be set for all rotate and scale transformations on the element.Choose the element's fill-box as the referenced box of the origin.Note that if the element is scaled himself you cant use CSS origin, in such case you need to use (cx,cy) parameter of rotate.
13. Set the origin as a related position to the selected box
14. Choose center as x axis
15. Set offset to 0
16. Same for Y
17. Set duration to 4 secondes
18. Add a begin element to start when the first animation ends
19. Select first animation id
20. Set 'from' angle to 0 and 'to' angle to 360
21. Click Add
22. Select the next element to scale
23. Choose scale type
24. Set the transformation origin to center on fill-box
25. Set 'from' x factor to 0and 'to' x factor to 2y factors will be equals
26. Click Add
27. Select next element to apply skewX transformation
28. Choose skewX type
29. Set 'from' and 'to' skew angle
30. Click Add
31. Choose skewY type
32. Set skew angle to -60
33. Click Add
34. Click 'transform' icon to list all transform animations
35. Select first animation
36. Click Begin to start animations
37. End of animation

View it in separate window

Showcase steps

1. Select rect to animate width
2. Click Animate attribute
3. Set all properties
4. Select width attribute
5. Click next
6. Set duration to 5 secondes
7. Set repeat count to indefinite
8. Select begin pane
9. Click Add event
10. Select event target to 'go' shape
11. Select values pane
12. Enter 200
13. start animation: select no
14. Click Add
15. Copy the rect
16. Align x y to the base line
17. Edit the copied animate element
18. Select calcMode pane
19. Set calcMode to spline
20. Set keyTimes values to 0 100
21. Set keySplines values to 50 0 50 100
22. Click Update
23. Click 'go' shape to begin animations
24. Edit second animation to change keySplines values
25. Change keySplines values with a sample

View it in separate window

Showcase steps

1. Select circle to animate cx attribute
2. Click Animate attribute icon
3. Set all properties
4. Select cx attribute
5. Click next
6. Set duration to 5 secondes
7. Set repeat count to indefinite
8. Select begin pane
9. Click Add event
10. Select go
11. Select values pane
12. Set values to 100 150 200 250 300
13. Start animation: select no
14. Click Add
15. Copy the circle
16. Set cx to 100 and cy to 280
17. Edit the copied animate element
18. Select keyTimes pane
19. Set keyTimes values to 0 10 25 50 100
20. Click Update
21. Click go shape to begin animations

View it in separate window

Showcase steps

1. Open a sample with animations
2. Load drawsvg anim-stroke-circle sample
3. Load the sample
4. Open animations menu
5. Click scheduler icon
6. The dialog shows the animations plan, start times and chainings.This sample has 3 animations
7. The first animation #animr1 begins at 0s.It grows the radius circle from 0 to 7
8. The second animation #animr2 begins when animr1 ends and decrease radius circle from 7 to 0
9. The third animation starts when animr1 starts and varies the circle's stroke-dashoffset property from 44 to 0 indefinitely.
10. Click close
11. Pause animations
12. Unpause animations

View it in separate window

Showcase steps

1. Select the moving target
2. Add the motion path to the selection (CTRL+click)
3. Open Animations menu
4. Click motion icon
5. Select origin pane
6. Select target center point
7. Choose the Transform method
8. Set duration to 5 sec
9. Click Add
10. Select the other moving target
11. Select the ellipse as the motion path
12. Click motion icon
13. Select target center point
14. Choose the animate method
15. Set duration to 5 seconds
16. Click Add
17. Click the circle to launch its animation
18. Edit animations
19. Select the second animation
20. Click Edit
21. Open constraint pane
22. The animation sequence (translate, motion, translate back) is managed by the motionTranslate constraint

View it in separate window

Showcase steps

1. Select motion target rectangle
2. Select the rectangle as motion path.Add to selection (CTRL+click)
3. Open animations menu
4. Click motion icon
5. Click path pane
6. Select copy
7. Set duration to 5 seconds
8. Click Add
9. Select the motion target circle
10. Click motion icon
11. Select motion_path_ellipse from the copy list
12. Click Add
13. Select motion target shape
14. Select the path as the motion path
15. Select refers the path
16. Click Add
17. Edit animations to change paths
18. Select second animation (circle motion on ellipse)
19. Click Edit
20. Open path pane
21. Change copy move_path_ellipse to move_path_rectangle
22. Click Update
23. The circle is moving around the rectangle.Click Undo to move back to ellipse
24. Select the ellipse to transform it
25. Click transform icon
26. Turn it 45 dg
27. Resize it -50%
28. Animation is updated on motion path changes
29. Select the path
30. Transform it
31. The motion path is updated by the motionRefPath constraint
32. The motion path is updated by the motionCopyPath constraint

View it in separate window

Showcase steps

1. Open shapes menu
2. Open emoji catalog to draw a cyclist
3. Select bicyclist
4. Draw emoji box
5. Transform the symbol
6. Flip the symbol to left to right
7. Open animations menu
8. Click motion icon
9. Open group anchor
10. Click create
11. Open path pane
12. Select refers path
13. Open origin pane
14. Set motion origin point to target bottom center
15. Click animate
16. Open rotate pane
17. Click auto
18. Set duration to 5 seconds
19. Click Add
20. Click symbol to restart animation

View it in separate window

Showcase steps

1. Drawing of a skier at the top of the toboggan ready to jump
2. Open fontawesome shapes catalog
3. Search skier
4. Select Skiing shape
5. Draw skier bounding box
6. Rotate it
7. Resize it
8. Change id to skier
9. Click animate motion icon
10. The skier shape is transformedSelect create the group
11. Select motion_path
12. Select target bottom center point as motion origin
13. Select animate
14. Select rotate auto
15. Set duration
16. Click Add
17. Move the skier
18. Open selection menu
19. Select motion_path element to view its length
20. The motion path length is 488
21. Select toboggan to view its length and to compute its ratio with motion path
22. The toboggan length is 303The ratio is (1-488/303)*100=61%Toboggan length is equals around 60% motion path length
23. Edit skier animation to set speeds and accelerations
24. Select all properties
25. Open keyTimes pane
26. Select keyTimes values
27. Add an intermediate value to set the speed on the toboggan to twice the speed of the jump.Since the length of the toboggan is 60% of the motion path, so the keyTime value is 30%
28. Open keyPoints pane
29. Select keyPoints values
30. Set the value to the extremity of the toboggan : 60%
31. Click Update
32. Edit animation to set accelerations
33. Open calcMode pane
34. Select spline
35. Open keySplines pane
36. Select keySplines coordinates
37. Select the accelerate spline for the toboggan part
38. Click next time interval to set its spline
39. Select the decelerate spline for the jump part
40. Click Update
41. Select 'go' shape
42. Click add hyperlink
43. Select animation
44. Click OK
45. Select motion path to set it transparent
46. Click transparent
47. Click go

View it in separate window

Showcase steps

1. Select the cloud shape to animate fill attribute
2. Click Animate attribute icon
3. Set only required properties
4. Select the fill property
5. Set duration to 9 secondes
6. Add click event
7. Select cloud click event
8. Set fill 'to' value
9. Apply darkslategray
10. Start animation: select no
11. Click Add
12. Select the first drop to animate its fill attributewhen the first animation begins
13. Set duration to 3 secondes
14. Add event
15. Select e1_animate begin event
16. Click Add
17. Select second drop to animate its fill attributewhen the second animation ends
18. Select e2_animate end event
19. Click Add
20. Select third drop to animate its fill attributewhen the third animation ends
21. Select e3_animate end event
22. Click Add
23. Select text to add a hyperlink that begins the animation
24. Click Add hyperlink icon
25. Select animation e1_animate
26. Click OK
27. Click the text to begins the animation
28. Click the cloud to begins the animation
29. Check the animations planning
30. Click Close

View it in separate window

Showcase steps

1. Select C1
2. Open animations menu
3. Click set icon
4. Select fill style property
5. Set id to C1_set
6. Set duration to 4 sec
7. begin on C1 click event
8. Select gold color
9. Check start no
10. Click Add
11. Select line
12. Set stroke color to gold when C1_set begins
13. select stroke style property
14. Set duration to 4 sec
15. Select begin
16. Animate y2 from 150 to 350 when C1_set begins
17. select y2 attribute
18. Set duration to 4 sec
19. Click Add
20. Select C2
21. Set fill color to gold when line_animate ends
22. Select fill style property
23. Select line_animate end
24. Click Add
25. Click C1 to start animation
26. finish