Forum Discussion

JamesonMattice's avatar
JamesonMattice
Community Member
14 days ago

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:

BTN - NEON

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...

storyline 360
  • JesseWu's avatar
    JesseWu
    Community Member
    14 days ago

    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.

  • Nathan_Hilliard's avatar
    Nathan_Hilliard
    Community Member
    12 days ago

    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.

    • JamesonMattice's avatar
      JamesonMattice
      Community Member
      12 days ago

      Thanks Nathan, pretty close indeed! The fact that the source .story file was not included in the original challenge submission indicates there was trickery beyond the base Storyline functions used.

Related Content