The way I would do it would require 11 timelines: You can create the actual animation consisting of the grow animation + pause timeline action + shrink animation once, and then copy/paste that animation onto the other 10 timelines.
Creating the timelines & setting the mouse over / mouse out timelines for each character would be somewhat tedious, but this is how I would handle it.
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.
Oh, sorry! I am getting the blur animation on your version, but not the scaling animation. Added a color animation test, and that works fine too. I’m wondering if keeping the text “in-line” is overriding the transformation property, ie, it only inherits it from it’s font rules.
Ha! Yeah, the clumping was what I had before I grouped the letters inside their own groups.
Sadly, the vertical line up is a huge typographic no-no, as it destroys readability. We scan words as clumps, not letters (compare kids when they begin to read in how they sound out each letter, as opposed to an accomplished reader). Vertical layout destroys that clumping ability. Interesting problem!
Hi @emcee ,
I’m not sure that I understand your idea. According to the video that @ouch_stop post, I’ll use the symbol to do the effect. (I’m poor in coding so I often use the element animation and timeline).
I think symbol is a very good thing for reusing some animation/interaction and so on. Here is the steps:
Step 1: Create a symbol ‘H’ that have the character ‘H’, and the animation in a sub timeline;
Step 2: Add the mouseOver and mouseOut action to the character, to start the sub timeline or reverse it;
Step 3: Copy the symbol ‘H’ from the resource!!;
Step 4: Drag the copied symbols to the scene and arrange them well~