Interaction Collection

Tips
1

Thought I could start a Micro Interaction Collection to give you some inspiration or show you a way how to achieve specific designs.

I will update the original post as soon as I post something new.
Any feedback is appreciated.

If you have questions, I’m here to help you out.
Please also share your ideas about what you want to achieve, and I’ll try to consider it.

Don’t expect too much, guys. Interactions will be reworked at some point and then things could be outdated - so I’m not investing that much time.

Keep in mind that interactions might not be accessibility ready by now, but hopefully they will when things get overhauled.
Also, this topic is focused on interactions only, you may need to adjust things for accessibility, semantics, etc.
Since I don’t build things from scratch, basic understanding of HTML and CSS might be helpful.

#1

Interaction Collection #1

Tutorial

#2

Interaction Collection #2

Tutorial

12 Likes
2

Hi @Marius,

Love the idea behind this!

Really appreciate how easy to understand and clear the tutorial is, it’s great. Can’t wait to see what else you come up with! :slight_smile:

2 Likes
3

@msteinlein asked for a toggle with a transition effect.
So I decided to add it here to the collection (original post, #2).

1 Like
4

@Marius Nice! Thanks once more for your great instructions, especially about this topic - it helps me a lot and definitely improves the concerning modules :))

2 Likes