Exploring a little hover animation on the Keyframes mark.

I'm trying to infuse some playfulness into the Desktop app when you hover over the main logomark.

I would love to know what folks thing of this interaction. Is it annoying? Does it work? Is it too much?


Fresh Top
  1. That it injects some character into the interaction.

    It feels somewhat rigid. If you look at the animation work of the media/snap/question/link buttons, they feel fluid... like the elements within the icon exist in a little universe. When the whole mark rocks like this, it sort of makes the elements feel too tethered together?

    I would either try something simpler (a subtle scale), or try to animate the shapes independently so they have a character all their own.

    These are just my two cents, though! :)

  2. I like the idea of adding some playfulness, I think that fits well with the platform.

    I think this animation could become annoying. I use the keyframes logo to navigate around the site (return to home), having that animation play every time, I'm not sure if that would feel playful :)

    As @tylersticka said, maybe animating the shapes is a better way to go.

    Some ideas:

    - You could make this random as well, like for instance, the square could tip over to the left and slide against the circle pushing it of the screen.

    - Or the square could top over to the right and kick over all letters of the keyframes logo.

    - You could allow interaction with the two shapes, the user could drag/throw them around.

    - Only now do I realize that the two shapes indicate the symbols used in keyframe animation 🙃, you could maybe do something with that to make the relation more explicit.

  3. I could whip together a Lottie animation of the pieces broken up a little bit if you like?? Trigger it on hover?

  4. I think the profile nav and karma view should persist here -

    product wise: the karma thing is going have some strong influence on some future features!!

  5. @pasquale I was already thinking the same thing about Karma. Seems core to the platform and needs to be elevated.

  6. @tylersticka @rikschennink I love the ideas of bringing more movement to the logo animation. Currently the logo is a flat PNG image so I can't get crazy moving SVG elements around. But maybe if in the future @hq builds the mark as an SVG, we could bring some shape-based movement to it.

  7. How about animating the circle and square and not the title? A little spin or bounce - something light and playful

  8. It adds a bit of character and kinetics to the app.

    I agree with @tylersticka, something a little more subtle would feel better. This large shake is currently feeling a little PowerPoint-ish?

    Does the main logo do much on the desktop version? This sort of communicates some preeminence.

  9. Great ideas @koushik, and yeah @strawdogdesign I feel you on the PowerPoint-esque feels. I need to work with @pasquale on getting that logo as an SVG so I can play with it more.

Sign Up or Log In to leave a comment.