Here’s another way, much easier than the timelines, by using CSS. I’ve attached the css file separately for easy extraction.
I’m 100% sure there are ways to parse the string without having to resort to making each letter an object, but that’s beyond my capabilities
Each letter is a separate object.
Individually group each letter into it’s own group, so you now have 11 groups (if Interactive is your word), each with one letter object inside it. I’ll explain why you do this in a moment.
- For each Text object, not the group, assign a Class of ‘button’ (which we have not yet defined). Be sure to omit the usual ‘.’ in front of the class name:
- In Resources, load up the attached .css file.
It has a definition for .button for both it’s static and hovered state. I added a filter on there just to have a second animation timing example.
filter: blur(2px) !important;
transform: scale(1) !important;
transition: transform 4s, filter 5s ease;
filter: blur(0px) !important;
transform: scale(1.5) !important;
transition: transform .5s, filter 1s ease;
The animation on the static definition ensures that the letter will gently ease back to it’s non-hovered state. Without the Transition in there, it would instantly snap back.
This also explains why I put the letters into small groups. The Transform assumes the letters will snap to 0,0, so they would all jump to the upper-left corner of the screen. Fortunately, it’s all relative, so each letter snaps to the upper-left corner of it’s parent (the group).
- You should be good to go - the css has covered the Hover state.
hover.zip (16.3 KB)