Lottie Scroll Animation

If you're looking for beautiful animations for your site that are triggered by scroll, you've come to the right place. Scroll animations are the perfect interactive visuals because they don't require any complex interactivity from the user – all they need to do is scroll!

When scrolling back up, animations gracefully reverse, creating a distinct user experience that looks amazing – regardless of how a user is interacting with your site.


Preview: https://demo.wocode.com/lottie-scroll-animation

SETUP

WIDGET PLACEMENT

  • Drop the widget onto your site and place it in a row where you would like the lottie animation to be seen.

WIDGET OPTIONS

The content panel is where you will set up, add, and configure the widget's content. There are a number of options available here:


  • Find Lottie Files At: Use this hyperlink to quickly access the Lottie Files website and find lottie files for use in the widget.

  • Lottie Source: Use this dropdown to choose the source you want to use for your Lottie animation. There are 2 options that can be used to add a lottie file into the widget:

    Lottie JSON URL: This option uses a URL that is copied from lottiefiles.com.


    To acquire the JSON URL:

    1) Log into https://lottiefiles.com/ and locate the Lottie animation you want to use.

    2) On the Lottie animation screen, click the Generate button.

    3) Choose the project you want to save the animation to.

    4) New fields will appear where the generate button was. Click the Copy button next to the JSON link to copy the JSON file URL.

    5) Return to Wocode and paste the copied JSON file URL into the Lottie JSON URL field in the widget.


    File: This option allows you to upload your .JSON files directly to your site for use in the widget. To use this option:

    1) Select "File for download" as the source.

    2) Choose the .JSON file from the File Library window (or use the Upload Files button to upload a new .JSON file if you haven't already).


  • Play Once: When enabled, the animation will only play once per page load.
  • Animation Speed: Sets the speed of the animation.
  • Animation Duration: Sets how long the animation lasts as you scroll the page.

DESIGN SETTINGS

The Design section allows you to customize the look and feel of the Lottie Scroll Animation.

  • Background Color: Sets the background color behind the lottie animation.
  • Animation Vertical Alignment: Sets the vertical alignment of the animation within the widget's container.

HOW TO REACQUIRE JSON URL

After initially acquiring the JSON URL, follow these steps to access it again:


1) Select the animation from your dashboard.

2) Set the Asset link format to "Lottie JSON".

3) Copy the Asset Link URL, and paste it into the widget.