Forum Discussion

AlvaroAldana's avatar
AlvaroAldana
Community Member
20 hours ago

Sliding Results Bar by Variable - impossible?

I've created a self assessment that maps a company's readiness level for adopting innovation.  They score themselves on a range of metrics and end up somewhere on a 5 point scale showing their current readiness, and clearly displaying what they need to do to move themselves closer to full readiness, however it isn't as simple as 5 - there are graduations between the numbers. I want their result to fill up a meter in a smooth and visually appealing graphic which slides from the left to the right, and stops where they are in their readiness level, which might include 3.2, 3.25, 4.15 etc.

I'm having real difficulty making this animation based on the variable from their results. (I have the final variable by using triggers to add the results one by one to a new variable, then divide that result by 5, thus making the average which is their final score).

Motion paths can't be edited based on a variable (ie, motion path to stop 'variable' percent of the path); motion paths go from the center of the object, not the edge meaning imprecise ending of the motion across a range; layering and using states means I have to do something like 50 states to show the graduations between numbers which is a lot of work and still isn't going to show the graduations I want to show. Using a slider won't work as you can't change the colours of the slider track as the thumb moves. 

Can anyone help me? Surely I'm not the only one who wants to show results by percentage, with accuracy in this way? Think of the ways to use it - filling up a jar to a percentage point... Superimposing a syringe image and decreasing a quantity by a percentage...  Making a tug-of-war concept that changes by percentage to demonstrate equal and opposing concepts...

  • While you can make a much more elegant progress bar using GSAP or even CSS animations through JavaScript, you can make a very basic progress bar using a motion path linked to a variable change trigger. This still uses JavaScript to update the variable via whatever process you desire, but it avoids a lot of the other issues created by modifying object positions outside of Storyline proper.

    Basic demo of linking motion path: https://360.articulate.com/review/content/ad32b581-1869-417a-bdcb-c91399dbdcf4/review

    This uses a motion path with a relative start position and no easing that moves a very small increment each time a variable changes. Update the variable to the desired endpoint in a JS trigger and the object will move along the motion path. The variable update process could be modified to accomodate your desired speed, easing, etc.