FIZZX v0.0.4

UI physics without duration or easing

        import Fizzx from 'fizzx'

⏳

        
const emoji = new Fizzx(window.emoji)

document.body.addEventListener('click', e =>
  emoji.to({
    translate: {
      x: e.clientX, 
      y: e.clientY + window.scrollY,
    }
  }))

Explanation:

When a fizzx element is initialized, the element passed in has it's position in the window asynchronously evaluated to prepare for stage/document anchored absolute animation. Works great on elements initially in flow that need to F.L.I.P.

This emoji demo; on click, 2d translates the emoji from it's current x, y to the mouse position in the window. Fizzx figures out speed and timing based on mass, etc.

To help you orient, the top left of the document is x and y. Pass 0 and 0, the emoji would animate from it's current position to the top left, and do so based on it's physical properties.

          
// top left of the document
emoji.to({
  translate: {
    x: 0, 
    y: 0,
  }
})

2 steps; 2 functions

Give nodes mass; Give nodes a new pose

1) Initialize

Fizzx returns a class representing an element that you gave physics properties

          
const fx = new Fizzx(Element)

2) Animate

Direct it somewhere on the document absolutely or direct it somewhere relative to itself

          
// absolute
fx.to({translate,rotate})

// relative
fx.effect({translate,rotate})

to(): <Promise>
directs the element to a new location on the document body, as if it's absolutely positioned

effect(): <Promise>
changes the element from it's current location, as if it's relatively positioned

💡

Each return a promise, making async/await with Promise.all() very powerful for orchestration of sequences or repetition!

Notice the use of await in the demo code.

Fizzx Options

Since there's no duration,
your element's physical properties and distance inform the motion

Provide physics properties at initialization time

            
// (defaults shown)
const fx = new Fizzx(Element, {
  mass:           1,
  damping:        10,
  stiffness:      100,
  start_velocity: 0,
})

Or, set them later

            
// many properties at once
fx.options = {...}

// only one
fx.options['mass'] = 10

Bouncy Moves

Give physics to elements in flow and effect 😉 them

            
await box.effect({ translate: {x:  300} })
await box.effect({ translate: {x: -300} })

Bouncy Zoomies

Fizzx translates z to scale for easy basic depth physics

            
await box.to({ translate: {z: -75} })
await box.to({ translate: {z: 0} })

Bouncy Spins

Spin stuff like it's got rubber bands attached

            
box.to({ 
  rotate: {
    z: 20, 
    x: 30, 
    y: 40
  }
})

Bouncy Whatevers

Put it all together

            
await box.effect({ 
  rotate:    {z: 20, x: -10, y: 20},
  translate: {x: 100, y: 20, z: -20},
})

await box.effect({ 
  rotate:    {z: -20, x: 10, y: -20},
  translate: {x: -100, y: -20, z: 20},
})

Bouncy Orchestration

Rearrange, have fun!

            
await Promise.all([
  box_1.effect({ translate: {y: 120}, delay: 0 }), 
  box_2.effect({ translate: {y:  40}, delay: 50 }), 
  box_3.effect({ translate: {y: -80}, delay: 100 }),
  box_4.effect({ translate: {y: -80}, delay: 150 }),
])

Bouncy Force

Springiness in z-space

            
// into negative z-space on press
btn.on('mousedown touchstart', e =>
  fizzx_btn.to({
    translate: {
      z: randomInRange(-50,-15),
    },
  }))

// back to 0 on release
btn.on('mouseup touchend', e =>
  fizzx_btn.to({
    translate: {z: 0},
    rotate:    {z: 0},
  }))