Forum Discussion
making a bar graph animate up and down as you move a slider
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?
Hi Pasa,
Did the example Trevor shared help you out?
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!
No not easy the shape grows from the bottom when you increase the height, you need to drag the up
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!
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.
Hi Clement,
He may no longer be subscribed to this conversation, but If you'd like, you can reach out to Walt by clicking on his profile name and clicking the Contact Me button to know more about how he created the slider interaction!
Thank You Team...
