I like to keep things simple, but I also know how much adding a little bit of animation makes the flow smoother.
There are plenty of mind blowing animations out there and a variety of techniques to implement those, but how about we start with something relatively simple to get familiar with css animations and events?
Fade Element In and Out: requirements and recipe
As a user I want to see an element fade in to appear on page and fade out before disappearing so that I can enjoy smoother transition.
Something like this:
Of course the duration and other settings of animation are up to you, but here are quite expectable requirements for this animation:
Requirements
- Element should fade in when added to DOM
- Element should stay visible until removal is triggered
- Element should fade out before it is removed from DOM
Recipe
- Start with fade in animation
- Add fade out animation
- Remove element once fade out animation is finished
- Add a trigger to play it again and again and again...
Hints
You should be able to use css animations and listen to animationend to achieve required result :-)
Hard mode: Transition between elements
Now that you've got fade in and out for one element, how about tuning it up a notch by adding more elements to the mix?
Fade elements in and out in sequence: 1st appears, 1st dissapears, 2nd appears, 2nd dissapears, etc.
Might be a good use case for generators, wouldn't you think ? ;-)
Share your creations and feedback and see you tomorrow!
Liked the idea a lot and would love to have it all year long?
Top comments (0)