DEV Community

Cover image for Project Eight: Transitions
Valeria
Valeria

Posted on

Project Eight: Transitions

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:
Home Simpson disappearing into the bush

Of course the duration and other settings of animation are up to you, but here are quite expectable requirements for this animation:

Requirements

  1. Element should fade in when added to DOM
  2. Element should stay visible until removal is triggered
  3. Element should fade out before it is removed from DOM

Recipe

  1. Start with fade in animation
  2. Add fade out animation
  3. Remove element once fade out animation is finished
  4. 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?

Buy Me A Coffee

Top comments (0)