Forum Discussion
How to make this image transition?
Hi everyone, I checked out this video with a nice interaction (3:20 min.).
https://youtu.be/4ZvOtxSDSlA?si=k86yQ1msoRUWIfsG
Any ideas on how you get the buttons to move the images, based on the scroll panel trick he explained earlier?
Thanks.
To recreate the use of buttons as seen in Nejc's video (This guy is really smart and nice), you need to create 4 triggers per button. So, 8 triggers for the 2 left/right buttons. But it is not complicated at all.
>>I'll start with the RIGHT button (to move the panel to the right)
You need 1 first trigger to start moving the "scrolling panel" when you click on the button. 1 other trigger to continue moving as long as the button is pressed. Ditto for the “image” in the panel, so 2 other triggers.
BUT FIRST, you need to ensure that the panel and image will move CONTINUOUSLY and REGULARLY as long as the button is pressed.
The Motion Path to the right of the “Panel” is 10px in 0.10s; no slow motion; relative starting point.
The Motion Path to the left of the “Image” in the panel is in the opposite direction, same setting.
OK, now:
- 1st trigger: Move "Panel" along its Motion Path (to the right) when “Right Button” status is “pressed”.
-1st trigger bis: Move “Image” along its Motion Path (to the left) when the “Right Button” status is “pressed”.
-2nd trigger: Move “Panel” along Motion Path (to the right) when the Motion Path ( to the right) of “Panel” ends IF Right Button status is pressed.
-2nd trigger bis: Move “Image” along Motion Path (to the left) when the Motion Path (to the left) of “Image” ends IF right button status is pressed.
(My apologies if the triggers are not perfectly translated, I have the French version).
This allows you to: trigger movement to the right if you click the RIGHT button, and continue the movement (10pix per 0.1s = very smooth and continuous, but you can change the speed) as long as the button remains pressed. It stops as soon as you stop clicking.
All that's left is to create the Motion Path (to the left) if you haven't already done so, and apply similar triggers to the LEFT button.
Have I made myself clear?
If you need the little .story file with which I tried and verified that this works, just let me know.
5 Replies
To recreate the use of buttons as seen in Nejc's video (This guy is really smart and nice), you need to create 4 triggers per button. So, 8 triggers for the 2 left/right buttons. But it is not complicated at all.
>>I'll start with the RIGHT button (to move the panel to the right)
You need 1 first trigger to start moving the "scrolling panel" when you click on the button. 1 other trigger to continue moving as long as the button is pressed. Ditto for the “image” in the panel, so 2 other triggers.
BUT FIRST, you need to ensure that the panel and image will move CONTINUOUSLY and REGULARLY as long as the button is pressed.
The Motion Path to the right of the “Panel” is 10px in 0.10s; no slow motion; relative starting point.
The Motion Path to the left of the “Image” in the panel is in the opposite direction, same setting.
OK, now:
- 1st trigger: Move "Panel" along its Motion Path (to the right) when “Right Button” status is “pressed”.
-1st trigger bis: Move “Image” along its Motion Path (to the left) when the “Right Button” status is “pressed”.
-2nd trigger: Move “Panel” along Motion Path (to the right) when the Motion Path ( to the right) of “Panel” ends IF Right Button status is pressed.
-2nd trigger bis: Move “Image” along Motion Path (to the left) when the Motion Path (to the left) of “Image” ends IF right button status is pressed.
(My apologies if the triggers are not perfectly translated, I have the French version).
This allows you to: trigger movement to the right if you click the RIGHT button, and continue the movement (10pix per 0.1s = very smooth and continuous, but you can change the speed) as long as the button remains pressed. It stops as soon as you stop clicking.
All that's left is to create the Motion Path (to the left) if you haven't already done so, and apply similar triggers to the LEFT button.
Have I made myself clear?
If you need the little .story file with which I tried and verified that this works, just let me know.
Hi Emmanuel, I almost got the result, but I´d like to know how to set the speed of the motion, and please, share your story file.
Thank you! I´ll try your suggestion!
Alternatively, we could use a slider instead of buttons to eliminate the need for continuous clicking. We could implement a slider with just one stop to animate the image transformation, or a slider with ten stops for a smoother transition. The first option requires 4 triggers to animate the image transformation and 2 additional triggers to change the slider state (optional). The latter option is more complex, as it involves detecting the direction of the slider and moving the image left or right accordingly. The best part is that both solutions don't require JavaScript.
One Step Example:
Ten Steps Example:Additionally, we could create a much larger, 99% transparent slider thumb, allowing users to transform the image by dragging left or right anywhere on the screen.
Thank you! I´ll try this too.
