Move element interaction

Move element interaction

You can have users change the position of elements by way of interaction. Use the ‘Move element(s)’ interaction to do so. You can use this function, among other things, for:


How does it work?

Select the desired element (that you want the users to be able to click on to make an element move) and go to Interactions. Click on the blue (+) button to add a new interaction. Choose On Click in the opened window and select the option Move element(s). Continue by clicking on the blue (+) button to add a ‘move action’



Movement


Two types of movement are possible:

Relative: movement relative to the position of the element at that moment. 
Absolute: movement to a set position on the canvas.



Move (X/Y)

Determine the movement of the element on the basis of the X- and Y-axis.

Attention: calculations are made on basis of the location of the upper left corner of an element. 

Duration

This is the duration of the movement (in milliseconds).  For movement without animation (instant), enter '0'. If you want there to be an animation of the relocation between the initial and ‘new’ position, choose a higher value than 0, for example 500 (0,5 seconds)

Press Apply after you are done configurating to confirm the settings. 




    • Related Articles

    • In-video scoring through interaction

      You can save scores using variables. Variables are elements that can assume a certain value. A variable consists of a key and a value. The key is the ‘label’ of the variable, and is used to identify the variable. The value is the meaning or merit ...

    • Switchable video

      A switchable video is an interactive video that can ‘switch’ between screens, by way of a user interaction. This happens seamlessly while playing a video. With a switchable video, you can switch between different screens, providing multiple ...

    • Variable trigger and conditional logic

      A variable trigger is a trigger that performs actions on the basis of (a) variable(s). The variables are predefined with an interaction, input field component or through the database. The variable trigger performs actions based on conditions. It ...

    • Animate using keyframes

      Keyframes are the set-up positions of elements on their specific moments on the timeline. By using more than one keyframe, it is possible to linearly animate elements. Working with keyframes allows you to have elements move over the screen on the ...

    • Google Tag Manager Integration

      Google Tag Manager Integration Ivory Studio makes it easy to send user data of interactive video’s to Google Tag Manager (GTM). This provides insight in the performance and impact of the interactive video. Moreover, this allows users to combine ...