welcome to

DUBLIN JS CSS

IMPROVING WEBSITE UI WITH

CSS ANIMATIONS

This talk: hop.ie/go/css

Source files

About me

Donovan Hutchinson

Work: Converser

Twitter: @donovanh

Blog: hop.ie

Email: d@hop.ie

First, a bit about me. I'm a front-end developer. My day job exposes me to all sorts of cool and interesting technologies, SASS, server-side JavaScript, static website generators, rails apps and more. I also spend a fair amount of time thinking about usability, and how interact with web apps. Outside of work, I like to create small, and mostly useless, web projects to try out ideas. Often things I've learned from these projects find their way into my day to day work, sometimes not, but it's a fun way to make sure I keep learning. What I'm going to talk about this evening is a little different from what this meetup's name might suggest. I'm not going to talk about JavaScript. Instead, I'm going to talk a bit about a subject I find fun, namely using CSS for transitions and animations. First, can I get a show of hands. Who here creates or plays a part in creating user interfaces? OK. Say you're moving some stuff around on the screen. Who's used JavaScript to achieve this? I certainly have. I still do. However what I'd like to present this evening is how you can get better performance, better separation of logical and presentation code, and achieve more interesting effects by using CSS instead.

Animation

Conveying information
Adding character / branding
Affording interaction
Implementing with CSS

CSS

Visual layouts
Incomplete browser support
New features:

Transitions, Keyframes, Canvas and more

JavaScript

Functionality
Good browser support
Frameworks

JavaScript example

Hover me

$('#js-button').hover(
function(e) {
  $(e.target).animate({
      padding: '30px 50px',
      backgroundColor: 'red'
    }, 500);
},
function(e) {
  $(e.target).animate({
    padding: '12px 20px',
    backgroundColor: 'green'
  }, 500);
});

Section 1

Boop!

Section 2

Beep!


$("#accordion").accordion();

CSS example

Hover me

#css-button {
  background-color: green;
  padding: 12px 20px;
  transition: all 500ms;
}

#css-button:hover {
  background-color: red;
  padding: 30px 50px;
  transition: all 500ms;
}

Section 1

Boop!

Section 2

Beep!

#css-accordion div.content {
  height: 0;
  opacity: 0;
  transition: all 500ms;
}

#css-accordion .item.active div.content {
  height: 60px;
  opacity: 1;
  transition: all 500ms;
}

Transitions

Multiple transitions

No transitions

Beer O'Clock *

What time is it?

* no transitions

Transitions

Beer O'Clock *

What time is it?

* not yet... soon

.download-button.transition
  @include transition(all, 500ms)
  span
    &.container
      img
        @include transition(all, 500ms)
    .text
      @include transition(all, 500ms)
    &.beer img
      @include transition(all, 500ms)

Transitions

Various CSS styles:

Shape / size / colour
Translate3D / Opacity

Easing

3D Transitions

C

S

HTML

<div class="cards" style="clear: both">
  <div class="card one">
    <div class="front"></div>
    <div class="back"><h3>C</h3></div>
  </div>
  <div class="card two">
    <div class="front"></div>
    <div class="back"><h3>S</h3></div>
  </div>
  <div class="card three">
    <div class="front"></div>
    <div class="back"><h3>S</h3></div>
  </div>
</div>

SASS (+ Compass)

.card
  width: 260px
  height: 340px
  margin: 0 20px 0 !important
  float: left
  position: relative
  @include perspective(800px)
  color: #fff
  text-align: center
  @include transform(translate(0, 0) scale(0.8))
  @include transition(all 500ms ease-in-out)
  
  .front
    width: 100%
    height: 100%
    position: absolute
    background: url(/talks/css-animation/images/telefonica.jpg) no-repeat
    @include border-radius(35px)
    @include transition(all 500ms ease-in-out)
    @include transform-style(preserve-3d)
    @include backface-visibility(hidden)
    @include box-shadow(0 0 20px #6f7e85)

    h3
      color: #fff
      padding-top: 80px
      font-size: 72px
      @include text-shadow(0 -1px #3b4c54)

  &.two .front
    background-position: -280px 0

  &.three .front
    background-position: -560px 0

  .back
    width: 100%
    height: 100%
    background: #2b4546 url(/talks/css-animation/images/escheresque_ste.png)
    @include border-radius(35px)
    @include transition(all 500ms ease-in-out)
    @include transform-style(preserve-3d)
    @include transform(rotateY(180deg))
    @include backface-visibility(hidden)
    @include box-shadow(0 0 20px #6f7e85)

    h3
      color: #fff
      padding-top: 80px
      font-size: 120px
      @include text-shadow(0 -1px #3b4c54)

  &:hover
    @include transform(translate(0, -20px) scale(1))

    .front
      @include transform(rotateY(180deg))

    .back
      @include transform(rotateY(360deg))
      @include box-shadow(10px 20px 30px #6f7e85)

Keyframes

Character

@keyframes move-bouncer {
  0% {
    height: 80px;
    border-radius: 50px / 40px;
    top: 100px;
  }
  44%, 60% {
    top: 0;
    height: 120px;
    border-radius: 50px / 60px;
  }
  100% {
    height: 80px;
    border-radius: 50px / 40px;
    top: 100px;
  }
}

Performance

JS

CSS

Example 1

beta.hop.ie

Example 2

converser.io

-- Screenshot of converser.io maker with link -- Open converser maker example in new tab. Describe what the page attempts to do. Those that were at my Angular talk might recognise this example. It's the interace we've built at Converser to help people create in-app conversations. We've added some new stuff since the last time, and we make use of CSS transitions all over the place. I'll walk through a few examples of how transitions are used to make the experience more enjoyable for the user. -- Add / remove content - describe the add button animation and how it's transition draws attention to it. The content adding / removing helps describe what's going on visually. -- Phone modes - transition between iPhones and S3. The background image, dimensions, colours and borders all transition. It wouldn't be possible to do all this with just JavaScript. However JS is used in part, handling the adding / removing of the classes from the DIVs.

CSS offers:

Hardware acceleration
Built in functionality: Transitions / Keyframes
Better separation of display and function code

It's possible to do all sorts of careful DOM manipulation with JS, but the main argument for moving the animations and transitions layer to CSS is that it's closer to the hardware. CSS is able to make use of hardware acceleration, and can result in smoother transitions on smaller devices such as phones. As well as this, CSS has been introducing several powerful tools to manupulate how things move and transition on screen. I'm not advocating ditching JS in favour of CSS only. JavaScript does things CSS cannot, such as attaching event listeners. These work well when used to add or remove classes from page elements, and use CSS to handle the visual changes.

SASS / Less / Stylus

A button

Nearly there

SASS

display: block
  width: 250px
  margin: 0 auto
  color: #fff
  background-color: #9f8
  @include background(linear-gradient(#9f8, #5a6))
  border: 10px solid #ccffcc
  @include border-radius(30px)
  padding: 20px

CSS

display: block;
  width: 250px;
  margin: 0 auto;
  color: white;
  background-color: #99ff88;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #99ff88), color-stop(100%, #55aa66));
  background: -webkit-linear-gradient(#99ff88, #55aa66);
  background: -moz-linear-gradient(#99ff88, #55aa66);
  background: -o-linear-gradient(#99ff88, #55aa66);
  background: linear-gradient(#99ff88, #55aa66);
  border: 10px solid #ccffcc;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
  padding: 20px;

Compatibility

Support is improving!
Use prefixes
For everything else, there's Modernizr

The hopper logo I used on hop.ie is currently broken in many browsers. Opera, Firefox and Safari have their own quirks, but the biggest one to be aware of is any version of Internet Explorer prior to v9 or so. Rather than detect browser vendor and present different content, I'm using modernizr to detect the browser's capability. When the page loads, the Modernizr JS detects whether the browser can support animation, and adds a class to the head of the document. The CSS then shows the animated area if this class is available, otherwise it uses a background PNG. It's important to keep fallbacks in mind when using CSS transitions. It's often a judgement call though. When animation is used to provide, like in the hopper example, entertainment value only, then it's not such a big deal if it doesn't work in older browsers. However if you're using animation to draw attention to elements or provide usability benefits, it might be worth looking into using some better supported CSS properties as a fallback. On an optimistic note though, Chrome has just dropped the "-webkit-transitions" prefix! Support is improving and will continue to do so. When the likes of Chrome drop their prefix, it's a sign that the property is considered stable. Depending on your audience, transitions might be perfectly good to use. However there will always be larger organisations, or in some cases geographical requirements that impact whether you'll want to rely on a modern CSS3 technique, but as front end engineers that's an ongoing consideration. Over the next few years we'll see less of IE8 and the likes, but we'll also need to be aware of how people use phones on mobile devices. But that's another talk.

Summary

Smoother animations
Less visual code in your JS
CSS getting more feature-rich
Crazy fun!

Next week...

MMUG Dublin: Introduction to Node.js

New Horizons Ireland
22 – 24 Strand Street Great, Dublin 1
7:30pm

Limited space. RSVP on their Meetup page

THANKS

Blog: hop.ie
This talk: hop.ie/go/css

welcome to

DUBLIN JS CSS

IMPROVING WEBSITE UI WITH

CSS ANIMATIONS

About me

Donovan Hutchinson

Animation

CSS

JavaScript

JavaScript example

Section 1

Section 2

CSS example

Section 1

Section 2

Transitions

Multiple transitions

Transitions

3D Transitions

C

S

S

HTML

SASS (+ Compass)

Keyframes

Character

Performance

JS

CSS

Example 1

Example 2

CSS offers:

SASS / Less / Stylus

Compatibility

Summary

Further reading

Next week...

THANKS

Questions?