# Animations

---

Content :

1. Using Css
2. Fade an element
3. Fade in an element
4. Fade out an element
5. HighLight an element
6. Move an element
7. Parse colour strings
8. Chain animation module calls
9. Chain animation DOM

---

The main animation method is Siga.anim.animate. The animate method animates CSS properties.

There are also animation helper methods, like Siga.anim.fadeIn and Siga.anim.move.

Animations Exemple:

Turn a paragraph red :

                  
Siga.anim.animate(S('p')[0], 2000, {
   'color': '#ff0000'
 });                    
                  
                

Move a paragraph :

                  
Siga.anim.animate(S('p')[0], 2000, {
   'marginLeft': '400px'
 });                    
                  
                

It's possible to chain animation module calls with Siga.anim.chain, but it's easier to use the DOM chained methods:

                  
Siga('p').fadeIn(2000).animate(1000, {
   'marginLeft': '200px'
 })                 
                  
                

Or Simply :

                  
S('p').fadeIn(2000).animate(1000, {
   'marginLeft': '200px'
 })                
                  
                

---

Animates an element using CSS properties :

• @Param: Object element A DOM element
• @Param: Number duration Duration in milliseconds
• @Param: Object properties CSS properties to animate, for example: { width: '20px' }
• @Param: Object options Currently accepts an easing function or built-in easing method name (linear, sine, reverse, spring, bounce)

---

Fade an element

                  
Siga.anim.fade(element , duration , { 'from' : '8em' , 'to' : '100px' , 'easing' : easing });
               
                  
                

---

Fade in an element

• @Param: Object element A DOM element
• @Param: Number duration Duration in milliseconds
• @Param: Object options May include an easing function: { to: 1, from: 0, easing: 'bounce' }

                  
S('p').fadeIn(2000).animate(1000, {
   'marginLeft': '200px'
 })                
                  
                

---

Fade out an element

• @Param: Object element A DOM element
• @Param: Number duration Duration in milliseconds
• @Param: Object options May include an easing function: Object options May include an easing function: { to: 1, from: 0, easing: 'bounce' }

                  
S('p').fadeOut(2000).animate(1000, {
   'marginLeft': '200px'
 })                
                  
                

---

Highlight an element.

• @Param: Object element A DOM element
• @Param: Number duration Duration in milliseconds
• @Param: Object options May include an easing function: { to: 1, from: 0, easing: 'bounce' }

---

Move an element.

• @Param: Object element A DOM element
• @Param: Number duration Duration in milliseconds
• @Param: Object options Position and easing, for example: { left: 100, top: 50, easing: 'sine' }

---

Parse colour strings

                  
assert.equal('rgb(255, 0, 255)',
              Siga.anim.parseColour('#ff00ff').toString());               
                  
                

• @Param: String colourString A hex colour string
• @Returns: String RGB string

---

Chain animation module calls

                  
Siga.anim.chain(element)
  .highlight()
  .pause(250)
  .move(100, { x: '100px', y: '100px', easing: 'ease-in-out' })
  .animate(250, { width: '1000px' })
  .fadeOut(250)
  .pause(250)
  .fadeIn(250)
  .animate(250, { width: '20px' });               
                  
                

• @Param: Object element A DOM element
• @Returns: Chainer Chained API object

---

Chain animation DOM

                  
Siga('p').animate(2000, {
    color: '#ff0000'
  });