CSS3 – Animating the DOM – Part 1

So recently my focus has moved visibly from native mobile development to web based development, this is mainly due to the constrain of work. As I try to keep my blog up to date it only makes sense that I transition the blog to this area too. No doubt I will be back to mobile soon but for now it’s web stuff and today its CSS3.

So recently I wanted to animate some elements of my web application to add a little more interaction to the application. Traditionally animation has been saved for flash websites and flex RIAs. As HTML5 gains steam so will the users expectations of web experiences so we must adapt to create intelligent and engaging applications and using animations can really give an application the feeling that its a living thing and not just a static page.

CSS 3 Basics

We will start with the basics as always and hopefully build up to some more advance techniques in future posts, However you may find that these basic effects can achieve exactly what you need.

Transitions

If you aren’t familiar with transitions then this brief introduction may help. Transitions basically define the start and end of your animation i.e Moving an object from A -> B should take x amount of seconds. You need transitions to make the movement that appears on screen appear seamless and smooth otherwise you will get a stickato movement that looks horrible.

transition: all 1s ease-in-out;

The above CSS follows this format

You can declare each of the above transition properties in its own CSS rule:

transition-property: background-color,width,height;
transition-duration: 2s, 1s, 0.5s;
transition-delay: 0s, 0.5s, 1s;

So this will animate background-color for a duration of 2 seconds and delay of 0s, width for a duration of 1 seconds with a delay of 0.5.

Using the above method you can achieve effects like this

Css3 Transition Opacity on Hover
Css3 Transition Opacity on Hover

You can transition many properties on elements such as color/background/height/ width and so much more you can also combine these to make nice effects too. The above shows how you can use transitions to fade out an image using the Opacity css property.

.div {
background:url(http://imgurl.com);
transition:all 3s ease;
}

.div:hover {
opacity:0;
}

Have a play around with transitions for now and see what effects you can create with using these basic transitions alone, In the next post we will look at more advance transitions and start to take a look at adding transformations on top too.

Dart Touch

For those of you that have been following my blog you will know I have been experimenting with Dart and the DOM. I have made a couple of simple example applications as learning aids such as PicsAPuzzle and more recently the Conundrum word game.

During these experiments I battled with touch interactions on tablet/mobile devices, so I decided to make a library that allows you to easily add User Interactions to any html element on your page.

What is Dart Touch ?

The idea behind dart touch is that it will apply vey basic styling and actions to any html element, thus meaning you have to write less code and be generally more productive when creating interactive content

How to use it ?

dart touch is designed to be very easy to use and very flexible in terms of implementation. Previously to create a touch compatible drag n drop element would require you to map these event handlers and code each of the related methods.

 tile.on.dragStart.add(_onDragStart);
 tile.on.dragEnd.add(_onDragEnd);
 tile.on.dragEnter.add(_onDragEnter);
 tile.on.dragOver.add(_onDragOver);
 tile.on.dragLeave.add(_onDragLeave);
 tile.on.drop.add(_onDrop);
 tile.on.touchStart.add(_onTouchStart);
 tile.on.touchMove.add(_onTouchMove);
 tile.on.touchEnd.add(_onTouchEnd);
 tile.on.touchLeave.add(_onTouchLeave);
void _onDragStart(MouseEvent event) {
 }
void _onDragEnd(MouseEvent event) {
 }
void _onDragEnter(MouseEvent event) {
}
void _onDragOver(MouseEvent event) {
}
void _onDragLeave(MouseEvent event) {
}
void _onTouchStart(TouchEvent event){
 }
void _onTouchEnd(TouchEvent event){
 }
void _onTouchMove(TouchEvent event){
 }
void _onTouchLeave(TouchEvent event){
 }
void _onDrop(MouseEvent event) {
}

This requires 9 methods to be individually coded to do very simple and basic actions to allow elements to be dragged and dropped with other items. With dart touch all you require is to add the css from the base.css file to your own projects css file and set the interaction you require via the setMethod from dart touch. example below

touch.setDragNDropTouch(element);

Passing this element into the set method will set all those interactions we looked at earlier for you, this only provides a basic implementation of all interactions if you want to further customise the Event Handlers you can create you own and add it to the basic implementation. Example

card.on.drop.add(_onDropCheck);

This doesn’t overwrite the functionality of onDrop it simply adds further functionality.

Conundrum 

My latest Dart experiment Conundrum is an extremely difficult word game, simply as there are no hint’s yet. But basically rearrange the letters to spell the 9 letter word. Conundrum is made with dart_touch to show how the interactions can be used and extended. You can view the demo here

Conundrum Example

Conclusion 

Dart Touch is very young at the time of reading exactly one day old !!! It currently only supports drag n drop actions, I plan on adding more in the future when time allows out with my day job. The code is fully open source and I would love people to contribute, fix bugs and help me out.

Source Code – https://github.com/cmac458/dart_touch

If you want to chat about it please get in contact on Google Plus or Twitter @cmac457

Thanks for reading, hope you find dart touch helpful !