# making a bar graph animate up and down as you move a slider

Aug 23, 2016

hello everyone,

I am in need of some help.  i am creating a bar graph that has a slider for yr 14, 15, 16 the bar should slide up and down as you slide to the years but the bars should be able to ease the bar in a natural form rather than just jumping to the different size bars for the years.  i have seen this in a getting started demo with articulate but there is no demo of how to do it.  Can anyone help?

###### 27 Replies

I wonder if you're recalling some the samples mentioned in this post

That's a cool idea, Walt!  Great way to keep your stops, states and triggers to minimal.  I've racked my brains before over having a million different states to simulate fluid motion.

Walt that is close to what I am looking for. my graph would go like this. point0 nothing on the chart.  (Point 1)show 236 then back down to (point 2) 202 then back to (point 3) 124.  Would I have to create one motion going forward for the 236,  then another motion going back to 202, then another motion going to 124 and a once I get to point 3 I would have to make 3 more motions  triggers to get back to 0?  does this make sense.  I have attached a document to show what I am trying to do.

Eric,

Yes. You need to create motion paths for each of the 3 movements, and 3 more to reverse them. Create them all with the object at its original spot, and set them all to have relative start paths. Use the previousLocation variable and the slider variable in trigger conditions to know which direction the slider is moving, because there are two motion paths from each point, so you have to know which direction you are moving.

Hey Eric.  If you're referring to this slide:

this bar graph was created using states and triggers.  The slider has 32 stops, and each of those bars has 32 states.  Triggers are used to move the bars according to the position of the slider.

Slider Format:

States:

Triggers:

So, depending on how smooth you'd like the action to be, you're going to be fine tuning the movement with a number of states and slider stops... which is why I was lamenting the work involved in creating that effect in my praise for Walt.  :)

Pick your poison:  a little time and elbow grease, or an alternative workaround like Walt's.  Either way, it's a great effect!

I would have done it using a transparent shape with a visible rectangle of different sizes within the states with a fade in/fadeout animation on that object.

It won't give you fly in with ease effect, but will be effective and I often find that using motion paths and sliders at some point the animations get confused, Walt's method is great I just find if you flick left and right quickly on a slider that sometimes the animation goes wonky.

And that becomes more pronounced as you add more stops.

thank you everyone this helps me out a lot.

I built similar one for training purposes that follows the same structure as the one Articulate has on their site and explained above

DEMO

.story file attached

This is amazing, and saved sooo much time! Thank you, Kevin!

You're welcome!

This post was removed by the author

hi Kevin, i need a health bar :( like a super mario... how can I do that?

hero x(figure the health)3-2-1

Hi Pasa,

Just wanted to connect those discussions in case anyone else was searching for similar!

Hi everyone, this is incredibly helpful. Quick question....how do you get your graph bar to grow "up"? Mine grows downward as it moves through the states. Is there a way to make the anchor point at the bottom so it increases in size towards the top of the slide? I feel like I'm missing something really easy here. Thanks in advance.

Hi Andy,

Invert the triggers to start at the last object state instead of the first object state.

Example: For an object to start tall and get shorter when the slider is dragged, create an object with 10 states and each state has a shape that is incremental in size from "tall" to "short". When slider variable is 1 change state to 1. When slider variable is 10 change state to 10. Inversely, to show bar start short and grow taller, change the triggers that when the slider variable is 1 change the state to 10. When the slider variable is 2 change the state to 9, etc.

Attached is a starter example I use when teaching this concept.

Hi Kevin,

Thanks for the response. I think I understand that part. The issue I'm having is that my bars are fixed at the top and "grow" down towards the bottom of the slide instead of growing "up" towards the top of the slide.  If you see my attachments, slide 1 is Normal state and slide 2 is state 5. The "anchor of the shape is at the top and it changes to go downward thus covering the text. I want it to go the other way (up). I'm assuming this is something easy I just can't find it!

OK, I think I figured it out. I have to change the Y position as I change the Height. So if Height increases by ten I also have to change Y by 10 in the other direction. At least that's my work around :)

Hey Andy! Glad you were able to figure it out. Once you form a mental model on the logic and how it behaves, you can repurpose this structure many different ways in different contexts. Good luck!

No not easy the shape grows from the bottom when you increase the height, you need to drag the up

Hi,

I've downloaded the Slider_Controlled_2-Way_Motion_Path (1).story that you can find above and replicated it in the module i'm creating.

Everything works perfectly but there's something i don't understand. There are two variables, Slider1 and PreviousPosition. PreviousPosition is set to be equal to Slider1 when Slider1 moves.

Therefor, how come the rectanglemoves whereas there are no triggers where Slider1 and PreviousLocation are equal. For instance, it says :

move  Rectangle 2 along Line Motion Path 7

When Slider 1 changes

If Slider1 = value 1

and PreviousLocation = 0

How is it possible to have Slider1 = 1 and PreviousLocation = 0 whereas we've said that PreviousLocation was equal to Slider 1 ...

It gaves me a headache trying to figure out why it works. If someone can help me ...

Thank you !

Hi Clément!

Happy to help! It would be easier if I could see the file to understand exactly what you're looking at. Would you mind sharing your file with us?

You can do so by using the "Add Attachment" button in this discussion!

Please finf the file attached. I've just made a copy paste of what i've seen above in the example shared.

Thank you !

Clem.