Quick way of doing letterspacing animation with onclick interations?

Design help General
1

Short of writing a small piece of code and embedding it, is it possible letterspacing animation with onclick in transitions?

I’m animating the hamburger menu and I would like to be able to animate the letterspacing on the menu text. Doesn’t seem possible without external code with current online interactions.

Hover text effect
2

Use any text,

Add a hand cursor for fine tuning,

http://vincent.polenordstudio.fr/snap/k8job.jpg

Edit the Pressed state

http://vincent.polenordstudio.fr/snap/5jw81.jpg

Transition on letter spacing,

Profit:

3

And you may want to add css custom code to prevent selection on that because it just happens naturally :smiley:

Also cursor may be un-needed as you do it on link already.

Add the class .noselect to the elements and this code:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
4

WHAT YEAR IS THIS VINCE?! :slight_smile:

I think when I asked that we didn’t have those transitions in at the time. Regardless thanks for the follow up.