Taking presentation out of JavaScript one setInterval at a time

Quick History

• var marqueecontents='
    Thank you for visiting 1996. Enjoy your stay!';
  document.write(''+marqueecontents+'');
  setTimeout("window.onresize=regenerate",450);
        

Now

•       $('#slidingdiv').hover(function(){
          $(this).addClass('hover');
          $(this).css({opacity: 0.7});
        });
        

Browser Support

• Transitions

  

• Keyframe Animations

  

Transitions

• transition: opacityCSS property to apply on 1sTime transition should takelinearTiming Function

Timing Function

• 
  linear cubic-bezier ease-in ease-out ease-in-out Animate
  

  cubic-bezier(0.9, 0.1, 0.1, 0.9);

  Stolen from htmlfivewow.com

Uncool things about Transitions

• Cannot transition from keywords, e.g. from auto to 100%
• Not all properties can be transitioned. bit.ly/animatablecss
• If another transition cancels existing transition, existing transition never fires a transitionend.
• transitionEnd fires for each property that changes if all properties are transitioned.
• event.target.removeEventListener(event.type, transCallback, false);
• transition-delay applies differently across browsers jsfiddle.net/p5ztz/
• Changing styles in JavaScript won't trigger transitions.

• node.style.backgroundColor ="red";
  node.style.backgroundColor = "blue";

• Trigger reflow

  node.style.backgroundColor ="red";
  document.body.offsetWidth;
  node.style.backgroundColor = "blue";

• Delay setting second style

    window.setTimeout(function() {
    node.style.backgroundColor = "blue"; }, 0);

Uncool things about Animations

• Like transitions, only animate certain properties.
• Like transitions, cannot animate between keywords and units.
• Firefox does not fire animation start event if there is no animation-delay set.
• No events to know when a keyframe is passed.
• Temporary solution: bit.ly/keyframeevents

When to use what?

• Transitions and animations can be used to mimic similar effects.
• Transitions work in more browsers, but require JavaScript triggers.

Example

Differences

• Transitions

  • Triggered when property values change
  • Cannot repeat unless via JavaScript

  Animations

  • Triggered when element is put in to animating state
  • Can be repeated via animation-iteration-count
  • Keyframe control

Differences (CPU usage)

• Transitions

  

  Animations

  

Comparison to JavaScript animation

• Trigger similar animation in JS
• Compare CPU usage

Performance of CSS vs JS animations?

In Summary

• CSS Animations are great replacements for simple JS animations.
• Performance is comparable to JS-based animations.
• Can only become better.

Using it now

• jQuery Animation Enhanced: playground.benbarnett.net/jquery-animate-enhanced/

  jQuery Transition: github.com/louisremi/jquery.transition.js

  Scripty2: scripty2.com

• Must read: www.html5rocks.com/tutorials/speed/html5/

requestAnimationFrame

• Implemented as: webkitRequestAnimationFrame & mozRequestAnimationFrame
• Browser in control of the repaint frame-rate.
• Syncs declarative (CSS) and scripted animations.
• Great way to fire custom events based on CSS animations (e.g. transitionstarted, CSSAnimationKeyframe).
• bit.ly/requestanimationframe & bit.ly/requestanimationframestory
• Working Draft: www.w3.org/TR/animation-timing/

Thanks

• • Holler @divya
  • Slides: nimbu.in/txjs/