Scroll in & scroll out

Trigger actions while browsing your page

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

With the “scroll in” and “scroll out” features, you can trigger actions according to the way you are browsing your page.

Here are the different options offered by RacontR covered in this section :

  • Scroll-in

  • Scroll-out

These actions allow you to launch animations in a long-form page whenever an element appears or disappears on the screen.

You are going to learn here how to trigger or show elements , actions and animations and make them stop or disappear.

You can use this method with all medias on RacontR : images, sounds, texts, videos.

Scroll-in

Apply your actions on an element. For example here, we want the title and the background introduction to move (X) when you scroll to the area where the hotlink is positioned, using the "scroll-in" action.

  1. Click on the element

  2. Add scroll action

  3. Choose scroll-in or scroll-out

In the preview, when you reach the scroll level where your element and its scroll-in hotlink is, your animations trigger !

You can build your entire page with this method by carefully positioning your text blocks and thus give a real touch of interactivity to your projects.

Scroll-out

Unlike the scroll -in action, the scroll-out will trigger actions when the element on which they are applied is not visible anymore

  1. Click on the element

  2. Add scroll action

  3. Choose scroll-in or scroll-out

In the same way, apply your scroll-out action on the hotlink concerned and choose to remove the title and the background from the scene.


Did this answer your question?