Forum Discussion

AlvaroAldana's avatar
AlvaroAldana
Community Member
10 months ago
Solved

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 curren...
advice
Articulate 360
instructional design
storyline 360
  • Nathan_Hilliard's avatar
    Nathan_Hilliard
    10 months ago

    If you examine the JS ,I think you'll find that this does actually move the bar according to the value of the variable (0 to 100). The movement itself is triggered by the incremental changes to a variable (starting at 0 and progressing to the final value), but that all happens inside the script trigger to move the bar. The actual distance is set by the variable currently attached to the slider.

AlvaroAldana's avatar
AlvaroAldana
Community Member
10 months ago

Thanks, Nadim!  That looks great and could also be a solution. Can you share the java script? How do you assign the variable to the line width?

Nedim's avatar
Nedim
Community Member
10 months ago

I've attached a .story file with a simple example demonstrating how to achieve this effect. In short, start by drawing a rectangle, for example, 400px wide, which will serve as the background for the fill. Then, draw a line on top of the rectangle and align it with the left edge of the rectangle. Once aligned, set the line's width to 1px and its height to 0px. Next, select the line, right-click to access 'Accessibility' and enter 'line' as 'Alternative Text', so that we can reference it in our scripts. 

The main goal is to properly access the line 'x2' property and manipulate its value with the value of our variable.

Example:
Current x2 = 1;
Var = 72;
Base length: 400px
New x2 = 72 * (400 / 100) = 288px (72% of the length of the base rectangle)

Initially, I load this script to set the line's stroke-width to match the height of the base rectangle.

const fill = document.querySelector('[data-acc-text="line"] line');
fill.style.setProperty('stroke-width', '15');


Main script

const fillWidthCurrent = document.querySelector('[data-acc-text="line"] [x2]');
const maxLength = 400;

const myVar = getVar('Var1');
const fillWidthAfter = myVar * (maxLength / 100);

gsap.to(fillWidthCurrent, {
    duration: 1,
    attr: {
        x2: fillWidthAfter
    },
    ease: 'power2.out'
});

Result