1

How to animate tutorial on-boarding experience like this site?

over 8 years ago from , data engineer & front end designer

https://stamplay.com/ How to animate tutorial on-boarding experience like this site? This is a beautiful website design that utilizes animation to show users how their services operate. How do they design/create these animations? Any tutorials out there to introduce me to this?

5 comments

  • Stefan Rauch, over 8 years ago

    Probably some sort of scroll library and sag animation.

    You'd be doing yourself a favour if you didn't copy them though, it's an awkward experience.

    0 points
    • austen m, over 8 years ago (edited over 8 years ago )

      Kind of weird how you have to keep scrolling for the animation, but in what ways would you say the experience lacks? & do you have any links or resources for scroll libraries you'd recommend learning?

      1 point
      • Stefan Rauch, over 8 years ago

        Up until the point where you actually scroll and reveal the new content, there's no indication that anything will happen. The user is presented with page devoid of any content after the first section, and while the animations are attempting to aid in the user understanding the products features, they come across as counter-intuitive to learning about them..

        I'm thinking more about the animations and how I'm presented with content than the content itself.

        1 point
        • austen m, over 8 years ago

          I see how would you improve the experience? Eliminating the moment where there's a void in content when you arrive at the animation?

          0 points
          • Stefan Rauch, over 8 years ago

            Right now there's no indication that content is going to be loading, adding content on first impression helps, but also adding some sort of affordance that indicates more content will appear would be beneficial.

            0 points