Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
25
Animated screen scroll
posted

Is there an easy way to have an animated scroll of an entire page through an interaction?  i.e. screen starts at the top of the page, a button is clicked and the page animates an automatic scrolling down of the page to the appropriate location, just like with an anchor tag (#)

  • 2475
    Offline posted

    Hi, Virgil.

    Yes, it's possible in the current version of Indigo. Our goal is to make it much easier in the next version of Indigo :), which is going to be released very very soon! We are excited!

    Anyway, for now you can add an interaction and create a new state. In this new state, select the contents of the screen and move it up. Add animations as required. You can download a project where I show you an example. There are two ways to go about it, as you will see in the project. I would suggest the approach shown in animated scroll recommended.screen. 

    Download animated scrolling project

    In the recommended approach I create two containers. Assuming I am creating a webpage, I called one container HEADER and another container CONTENT. The HEADER container has the navigation elements. I then added an interaction to create a new state. And in this state, I simply moved the CONTENT up. In other words, made changes to the state in response to the interaction.

    p.s.

    If you inspect the timeline, you will see why this is a better way to do it. You can use grouping to achieve a similar effect, if you are unfamiliar with the container element.