Interactions management

Create animations, transitions and interactions on a page

Edouard Williamson avatar
Written by Edouard Williamson
Updated over a week ago

The interactions in RacontR will allow you to create buttons, and more importantly, animate your pages, create transitions, but also interact with images, sounds and videos.

Here are the different options offered by RacontR that we cover here :

  • The different types of interactions

  • The Interaction tab

  • List of parameters

  • Parameters specific to the scene

The different types of interactions

In a conventional mouse-driven navigation, we have three types of interactions : click, hover (roll-out and roll-over) and scroll.

With tablet navigation we have six types : swipe left, right swipe, swipe top, swipe bottom, pinch in and pinch out.

  1. Click/Tap : when clicking or touching on a selected item.

  2. Hover. Roll Over : during a roll over of the selected element - Roll Out : in a roll out of the selected item with the mouse.

  3. Scroll in / Scroll out : add actions during scrolling to create interactivity.


The interaction tab

You are in the Clik/Tap interactions window

Start by clicking Add Action. A line appears with the following criteria :

  1. Add Action : choose from the drop-down menu the element on which to apply the interaction. An element can trigger animations on itself and all the other page's elements.

  2. Parameters : select the settings of the target element that will be modified by the interaction (cf. list of available parameters below).

  3. Value : depending on the settings, you may change its value. The interaction triggers the change in value of the element, from its value on the scene to the value you enter in this window.

  4. Length : choose the duration the interaction runs for.

  5. Delay : choose the delay before the interaction begins.

  6. Easing : apply an effect to the interaction (linear interaction, with acceleration, with run-up, with deceleration, elastic, bounce).

  7. Back : if you tick this case, a second interaction (a second click or a rollout if you chose Hover action) will put the target element back to its original setting.

  8. Delete : you can remove an effect by clicking on the cross.

  9. Apply : apply interactions.


List of parameters

Parameters common to all media

  1. X : changing the position of the target element in the abscissa (horizontal)

  2. Y : changing the position of the target element in ordinate (vertically)

  3. Current position +X : horizontal increment, with every click you add the X displacement value

  4. Current position +Y : same as X but vertically

  5. Width : change the width of the target element

  6. Height : change the height of the target element

  7. Background color : change the color of the target element (except video and audio)

  8. Rotation : make a rotation of the target element

  9. Opacity : change the opacity of the target element

  10. Scale : change the proportions of the target item (item 1.5 to enlarge by 50%)

  11. Depth : change the order of the target element in the layers stack. Therefore can be used to move an object in the foreground to give it value 1

  12. Dispatch roll-over : triggers the roll-over action of another button

  13. Dispatch clic : triggers the click action of another button

  14. Dispatch roll-out : triggers the roll-out action of another button

Specific parameters to video and sound media

  1. Play : triggers the playback of the media

  2. Pause : triggers pause of the media 

  3. Play/Pause : a first interaction triggers the reading, a second interaction triggers the break, and so on

  4. Seek to : allows to move to a specific second of video or audio. Very useful part for chapters video or sound

Parameters specific to the scene

Finally, you can animate the scene of your page through the Scroll settings parameters. You can build a large page, larger than the window in which you deliver your project. Thus, with the scroll, you can move on this great page and give the impression that the page moves before the eyes of the user.

  1. In actions, choose “Scene”

Then the kind of movement on the scene :

    2. Horizontal Scroll : the scene joined the X coordinate of the target element - Vertical Scroll : the scene joined the Y coordinate of the target element - Scroll dual axis : the scene joined the X and Y coordinates of the target element

   3. Finally, give a value. Here, our value is comparable to a target, we can use an image as a hotlink target, the screen will be positioned on their top and left edges.

Did this answer your question?