Workshop : SVG and Animation (SMIL, script based)

Organizers: Stefan Goessner,  Michel Hirtzler

 Rolling text  

Content: 
- use 'animate' on 'x' in 'text', on 'startoffset' in 'textPath' or 'animateMotion' for same result
- use javascript to know length of text, to modify attribute in 'anime' element

1) Horizontal rolling text with 'animate' element on 'x' of text

Example - change values for 'to'

2) How know length of text ?

Example -

3) Use javascript to get code for any string

Example of code -

4) Vertical rolling on block of text with 'animate' on 'y' and using <tspan> for lines of text.

Example - Get height of block -

5) Use 'textpath' and 'animate' on 'startOffset' to move text on any curve

Example  -  Example with Bezier's curve

6) Use 'animateTransform' to roll text

Example -