How was this animated button made?
Hey all,
I'm wondering if anyone out there can help decipher how this animated button was made in Storyline:
It was part of a challenge ~5yr ago and I want to replicate it, but no source file was included. The original creator has not been back much since then, but here's a mention if he is: EvangelosNeocho
I found the button here:
40+ Animated Button Examples for E-Learning #285 | Articulate - Community
Any help appreciated! I can get close, but not with the movement of the text when transitioning between hover and normal states, as motion paths are not allowed in states. Yeah you could get wild and manage this using triggers and animations (or even GSAP) on your slide/layer, but then it's an overblown button. And what if you have 10 of these on one slide? I'd rather keep all control within the button element itself if possible. Looking forward to see if anyone out there knows...
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.