how to simply move an component with animation ?

16ar shared this question 5 years ago
Answered

I am prospecting for a prototyping tool for my company. Prototyper seems perfect except this one issue I cannot resolve.


Is it possible to simply move an object with animation on an event ? I am a b it surprised the effect feature is not available in the "move" section.


Or am I misleading ?


Thank you

Comments (5)

photo
1

Hi,


if you explain which kind of animation you want to do, I could find some workaround to do it.


Thanks

photo
1

Thank you for your answer.


Basically I wanted to make a simple picture slider, but in future protypes i will need things like a toggle and/or dropdown menus or even (though it could be optional) specifics movement like scrolling animation or parallax movements.

photo
1

You can create a picture slider with dynamic panels.


1. Drop a dynamic panel to the canvas. Modify the size of the panel and add as many panels as pictures you want to include in the slider.


b45a03e4480df84915a23a0e3b65fdeb


2. Doble-click on the dynamic panel and drop inside an image widget. Modify the size of the image, copy it and paste inside each panel you have added.


3. Doble-click on the image widget and select the image you want to show.


4. Drop to the canvas two triangles and turn them to look like left and right arrow.


5. Select the right arrow, go to events and click on add event. Now, click on add condition and select the tab called "variable". Click on the green plus button and write a name to the variable, for example "slide", and set 1 as default value. Click ok.


Drop the variable inside the parentheses, drop and equal, doble click into the empty square and write the number 1. Then click ok.


6. Select "set active panel", select the panel 2, the type of transition that you want and click ok.


7. Click on the arrow next to do and select add action. Choose "set value" action, click on the variable tab, select your slide variable and write the number 2 inside the "value is" box. Then click ok


8. Now, copy the full event and paste it as many times as panels you have added.


Now, you have to modify the values of each action. Just doble click on the number 1 of the condition and change it for a 2. Then, doble click on the "set active panel" action and select the panel 3. After doing it, doble click on the "set value" action and modify the "value is" box.


9. Repeat it as many times as panels you have added and also you have to do it for the other arrow. In this case, the "set active panel" instead of select panel 2, you have to select panel 3. Maybe, you also have to change the effect.


I hope it's more clear now how to do it.

photo
1

Hi,


we are working in a new version of Justinmind Prototyper that we will launch in a few weeks and it will include the effect option for a move action. Also we will add a scroll to action.


I hope this improvements will be useful for your projects.


Best regards

photo
1

This is all just perfect :)


Can't wait for the next version of this great software