Forum Discussion
How was this animated button made?
This is pretty close to the original.
https://360.articulate.com/review/content/5c45589e-b384-43bd-9304-24da8e93bc7e/review
It's hard to tell exactly what approach was used in the example. This version combines animations, motion paths, and state changes. Storyline is a bit iffy with state changes, and the order of triggers makes a big differnence in animation timings. Also, sometimes the state changes just don't get applied.
To make a more reliable rendering, it would probably be better to craft this with custom CSS and apply it to the elements. That would take more technical work however.
It is humorous because I found it so difficult for me to reverse engineering a bootcamp level CSS transition animation for HTML dev.
I see the fade in and fade out in the demo's CSS file, but I just can't recreate the fade out part, so let's call it 51% alike.
My mind flow:
Treat them as different components. In the demo's html code, at least I found 3 rectangles in an unnamed group, an element called arrow icon 1, and an element including "NEXT" text.
With that in mind,
Components 1, a transparent rectangle, as main hover trigger. I am not sure it is necessary, but I want it as a safety measure.
Components 2:
a) a base rectangle at the bottom, as you will see the button when not hovered. Don't need to do anything about its state. Because the Components 3 will cover it completely.
b) a base text. Need to hide it when hovered.
Component 3 [all hidden until hovered, fade in & and fade out]:
a) a hover rectangle, to recreate the border color transition.
b) a arrow and text combo, to recreate the move along motion path.
How to keep your file readable with all hassle? Group them together so as long as you don't expand to check, the panel looks fine.