Animations

Create and edit SMIL animations
This category contains 14 showcases

Play all Animations showcases continuously

Animate attributes

Animate DOM attributes and style properties of elements

×

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

Play
Animate path

Animate a closed quadratic arc with three drawn states (c,c1,c2)

×

Showcase steps

  1. Select path C
  2. Open Animations menu
  3. Click animate icon
  4. Animate attribute d (path description)
  5. Open tab values
  6. Switch to values syntax
  7. State to, select c
  8. Click add value
  9. State v1, select c1
  10. State v2, select c2
  11. Click Add
  12. Select shape
  13. Click Add hyperlink
  14. Select the animation to start when you click on the shape
  15. Click shape to start animation

Play
Animate path with keyTimes

Animate a closed quadratic arc with three drawn states (c,c1,c2).
Use keyTimes to increase the pressure and slow down expansion and return to original state.

×

Showcase steps

  1. Open Animations menu
  2. Click Animate icon
  3. Click Edit
  4. Set all properties
  5. Open tab keyTimes
  6. Switch to keyTimes values
  7. Set keyTimes values to (0,5,20,100)
  8. Click Update
  9. Click shape to start animation

Play
Animate transform

Animate an element with translate, rotate, scale, skew transformations

×

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

Play
Animate using keySplines

Animate attribute values with spline interpolation 

×

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

Play
Animate using keyTimes

Animate using keyTimes with multiple values to control the transition speed of each value

×

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

Play
Animate wave path


Animate a wave path with drawn states.
Each path structure must be the same.
Draw each wave curve state by copy and move each control point.
Move each curve to the same starting point.
Animate the wave path with each curve.
The following modifications on the curves are replicated on the animation by a constraint.

×

Showcase steps

  1. Click Grid icon
  2. Enable grid to move each curve to the same start point
  3. Select wave1 and move it to wave start point
  4. Move wave2
  5. Move wave3
  6. Move wave4
  7. Clear grid
  8. Select wave
  9. Open Animations menu
  10. Click Animate attribute icon
  11. Select d attribute (path description)
  12. Open values tab
  13. Select values syntaxSet values as (wave,wave1,..,wave4,wave)
  14. Set duration to 4 sec
  15. Switch to all properties
  16. Open repeatCount tab
  17. Set as number 2
  18. Click Add
  19. Set fill color as turquoise
  20. Hide curves
  21. Select shape
  22. Click Add hyperlink icon
  23. Select animation to start on click
  24. Change wave4
  25. Move wave4 control pointsChange is replicated to animation by constraint

Play
Animations schedule

Describes the schedule of animations with their sequences.

×

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

Play
Motion origin


Shows how to define the origin of a motion animation. 
Define the motion origin point on the target.
Select the moving method (transform or animate).

×

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

Play
Motion path


Shows how to define the motion path of a target using the three methods (refers, copy, describe).
The motion path can be defined with a geometric element of any type (rectangle, circle, ellipse. path).
Animations are updated by constraints when motion path changes.
Animations properties can be edited.

×

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

Play
Motion target group


When the motion target is transformed, the animation should be
applied to an enclosing group of the target.

×

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

Play
Motion using keyTimes

Animate motion using keyTimes/keySplines to set speed along the path with spline interpolation to accelerate and decelerate.
A demonstration with ski jumping

×

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

Play
Synchronization by events

Synchronize animations by events (begin, end, click, hyperlink, ..)

×

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

Play
Using set command

Using the set command to fix elements state during animations

×

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

Play