SOURCE CODE: Animate Size in JavaScript

  
  
  
  
  
  
  
  
  
  
  
  







  
  UIZE JavaScript Framework



  

    JAVASCRIPT EXAMPLES
    Animate Size in JavaScript
    

      
SOURCE
    
  

  

  

    
In this example, the Uize.Fx.fadeStyle method of the Uize.Fx module is animating the size of an object. Move the mouse around inside the brushed metal square and you'll see a faint preview for a new size for the object. Click and the object will animate to that new size. How the object transitions is decided by the curve(s) used. You can change the curve(s) by clicking on one of the links in the "PRESETS" tab. When you choose a preset, a random new size will be chosen and the object will animate to that size using the new curve(s). To animate the object again, click a preset link repeatedly, or click the "PREVIEW ANIMATION" button repeatedly, or click anywhere on the metal square. To fool around with a preset's settings, switch over to the "PARAMS" tab to tweak values and click the "PREVIEW ANIMATION" button to preview changes.
  

  

  



Linear
  curve: null
  duration: 300

Picking Up Speed
  curve: Uize.Curve.easeInPow (4)
  duration: 500

Really Slow to Get Started
  curve: Uize.Curve.easeInPow (10)
  duration: 1000

Decelerating Towards the End
  curve: Uize.Curve.easeOutPow (4)
  duration: 500

Decelerating to a Crawl at the End
  curve: Uize.Curve.easeOutPow (10)
  duration: 3000

Starting Off Slow, Decelerating Towards the End
  curve: Uize.Curve.easeInOutPow (7)
  duration: 1000

Taking a Breather in the Middle
  curve: Uize.Curve.easeMiddlePow (4)
  duration: 800

Pull Back First
  curve: Uize.Curve.Rubber.easeInBack (2)
  duration: 600

Overshoot at the End
  curve: Uize.Curve.Rubber.easeOutBack (2)
  duration: 600

Pull Back First, Then Overshoot at the End
  curve: Uize.Curve.Rubber.easeInOutBack (3)
  duration: 800

Gentle Elastic Ease Out
  curve: Uize.Curve.Rubber.easeOutElastic (.3)
  duration: 1500

Super Elastic Ease Out
  curve: Uize.Curve.Rubber.easeOutElastic (.1)
  duration: 1500

Loose and Sloppy Elastic
  curve::
    Uize.Curve.Mod.blend (
      Uize.Curve.Rubber.easeOutElastic (.2),
      Uize.Curve.Rubber.easeOutElastic (.1)
    )
  duration: 2800

Pull and Release
  curve::
    Uize.Curve.Mod.repeat (
      [
        Uize.Curve.Mod.band (
          Uize.Curve.easeOutPow (5),
          1,
          0,
          -.3,
          0
        ),
        Uize.Curve.Rubber.easeOutElastic (.1)
      ],
      2
    )
  duration: 2200

Muffled Bounce
  curve: Uize.Curve.Rubber.easeOutBounce (3,-4,1.7)
  duration: 800

More Bouncy
  curve: Uize.Curve.Rubber.easeOutBounce (4,1.5)
  duration: 1200

Super Bouncy
  curve: Uize.Curve.Rubber.easeOutBounce (9,4,1.25)
  duration: 2000

Decelerate Into Coin Settle Effect
  curve::
    Uize.Curve.Mod.bend (
      Uize.Curve.Mod.rotate (
        Uize.Curve.Mod.multiply (
          Uize.Curve.easeInPow (3),
          Uize.Curve.Mod.repeat (
            Uize.Curve.easeInCircular (),
            45,
            0,
            true
          )
        )
      ),
      2
    )
  duration: 4000

Decelerate Into Bounce
  curve::
    Uize.Curve.Mod.repeat (
      [
        Uize.Curve.easeInSweetPow (1/5),
        Uize.Curve.Rubber.easeOutBounce (4,2)
      ],
      2,
      1
    )
  duration: 1300

Ease Slowly Into Short Bounce
  curve::
    Uize.Curve.Mod.bend (
      Uize.Curve.Rubber.easeOutBounce (10,-2,2,2.5),
      Uize.Curve.easeInOutPow (2)
    )
  duration: 1500

Third Time's a Charm
  curve::
    Uize.Curve.Rubber.easeInBounce (
      3,
      1.3,
      1,
      Uize.Curve.easeInCircular ()
    )
  duration: 2000

Quickly to Middle, Pull Back, Then Quickly to End
  curve::
    Uize.Curve.Mod.blend (
      Uize.Curve.easeInSweetPow (1/6),
      Uize.Curve.easeOutSweetPow (1/12),
      Uize.Curve.line (0,1)
    )
  duration: 1100

Stop and Go, Stop and Go, Stop and Go
  curve::
    Uize.Curve.Mod.repeat (
      Uize.Curve.easeInOutPow (3),
      3,
      1
    )
  duration: 1200

Wobbling on its Way
  curve::
    Uize.Curve.Mod.redraw (
      Uize.Curve.easeInOutPow (4),
      12,
      Uize.Curve.Rubber.easeInOutBack (4)
    )
  duration: 1700

Bouncing on its Way
  curve::
    Uize.Curve.Mod.blend (
      Uize.Curve.easeInPow (3),
      Uize.Curve.easeOutPow (1.5),
      Uize.Curve.Rubber.easeOutBounce (10,4,1.1)
    )
  duration: 3000

Hopping on its Way
  curve::
    Uize.Curve.Mod.blend (
      Uize.Curve.Mod.band (1,1,0,.8,0),
      Uize.Curve.Mod.band (1,1,0,.8,1),
      Uize.Curve.Rubber.easeOutBounce (
        6,
        Uize.Curve.Mod.band (1,0,0),
        1,
        -2
      )
    )
  duration: 2500

Horizontal First, Then Vertical
  curve::
    {
      width:Uize.Curve.easeOutPow (10),
      height:Uize.Curve.easeInPow (10)
    }
  duration: 500

Vertical First, Then Horizontal
  curve::
    {
      width:Uize.Curve.easeInPow (10),
      height:Uize.Curve.easeOutPow (10)
    }
  duration: 500

Elastic Horizontal First, Then Vertical
  curve::
    {
      width:
        Uize.Curve.Rubber.easeOutElastic (.5,2),
      height:
        Uize.Curve.Rubber.easeInElastic (.5,1.5)
    }
  duration: 750

Elastic Vertical First, Then Horizontal
  curve::
    {
      width:
        Uize.Curve.Rubber.easeInElastic (.5,1.5),
      height:
        Uize.Curve.Rubber.easeOutElastic (.5,2)
    }
  duration: 750

Snappy Elastic Vertical First, Then Horizontal
  curve::
    {
      width:
        Uize.Curve.Rubber.easeInElastic (1.2),
      height:
        Uize.Curve.Rubber.easeInOutElastic (.5)
    }
  duration: 500

Alternating Horizontal and Vertical Swagger
  curve::
    {
      width:
        Uize.Curve.Mod.repeat (
          Uize.Curve.easeInOutPow (3),
          3,
          1
        ),
      height:
        Uize.Curve.Mod.repeat (
          Uize.Curve.easeInOutPow (4),
          5,
          1
        )
    }
  duration: 1200

Alternating Horizontal and Vertical Stepping
  curve::
    {
      width:
        Uize.Curve.Mod.repeat (
          Uize.Curve.Mod.band (1,.4,0),
          4,
          1
        ),
      height:
        Uize.Curve.Mod.repeat (
          Uize.Curve.Mod.band (1,.4,1),
          4,
          1
        )
    }
  duration: 1400

Nervous Horizontal and Vertical Wobbling
  curve::
    {
      width:
        Uize.Curve.Mod.redraw (
          Uize.Curve.easeInOutPow (4),
          12,
          Uize.Curve.Rubber.easeInOutBack (4)
        ),
      height:
        Uize.Curve.Mod.redraw (
          Uize.Curve.easeInOutPow (5),
          14,
          Uize.Curve.Rubber.easeInOutBack (4)
        )
    }
  duration: 1700

Eccentric Elasticity Pounce
  curve::
    {
      width:
        Uize.Curve.easeOutPow (10),
      height:
        Uize.Curve.Rubber.easeOutElastic ()
    }
  duration: 500

Jelly Wobble
  curve::
    {
      width:
        Uize.Curve.Mod.blend (
          Uize.Curve.Rubber.easeOutElastic (.2),
          Uize.Curve.Rubber.easeOutElastic (.1)
        ),
      height:
        Uize.Curve.Mod.blend (
          Uize.Curve.Rubber.easeOutElastic (.18),
          Uize.Curve.Rubber.easeOutElastic (.12)
        )
    }
  duration: 2800

Hyperactive Excited Bouncing
  curve::
    {
      width:
        Uize.Curve.Rubber.easeOutBounce (4,3,1.5),
      height:
        Uize.Curve.Rubber.easeOutBounce (5,4,1)
    }
  duration: 750

Horizontal Deceleration, Vertical Bouncing
  curve::
    {
      width:Uize.Curve.easeOutPow (3),
      height:
        Uize.Curve.Mod.blend (
          Uize.Curve.easeInPow (3),
          Uize.Curve.easeOutPow (5),
          Uize.Curve.Rubber.easeOutBounce (10,3,1.4)
        )
    }
  duration: 3000

Hectic Independent Horizontal and Vertical Bouncing
  curve::
    {
      width:
        Uize.Curve.Mod.blend (
          Uize.Curve.easeInPow (3),
          Uize.Curve.easeOutPow (5),
          Uize.Curve.Rubber.easeOutBounce (10,3,1.5)
        ),
      height:
        Uize.Curve.Mod.blend (
          Uize.Curve.easeInPow (3),
          Uize.Curve.easeOutPow (5),
          Uize.Curve.Rubber.easeOutBounce (10,3,.5)
        )
    }
  duration: 3000

Horizontal to Vertical With Direction Change Twist
  curve::
    {
      width:Uize.Curve.Rubber.easeOutBack (4),
      height:Uize.Curve.Rubber.easeInBack (4)
    }
  duration: 700

Horizontal to Vertical to Horizontal With Two Twists
  curve::
    {
      width:Uize.Curve.Rubber.easeMiddleBack (5),
      height:Uize.Curve.Rubber.easeInOutBack (5)
    }
  duration: 1200

Ease Into Accelerating Direction Change Twirls
  curve::
    {
      width:
        Uize.Curve.Mod.bend (
          Uize.Curve.Mod.blend (
            Uize.Curve.Mod.repeat (
              Uize.Curve.easeInOutCircular (),
              5,
              0,
              true,
              false
            ),
            1,
            .5
          ),
          3
        ),
      height:
        Uize.Curve.Mod.bend (
          Uize.Curve.Mod.blend (
            Uize.Curve.Mod.repeat (
              Uize.Curve.easeInOutCircular (),
              5,
              0,
              true,
              false
            ),
            1,
            .5
          ),
          4
        )
    }
  duration: 1200