yarn add @lottiefiles/lottie-interactivity
npm install --save @lottiefiles/lottie-interactivity
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<lottie-player id="firstLottie" src="https://assets2.lottiefiles.com/packages/lf20_i9mxcD.json" style="width:400px; height: 400px;">"></lottie-player>
Configure library
<script> LottieInteractivity.create({ player: '#firstLottie', mode: 'scroll', actions: [ { visibility[0,1], type: 'seek', frames: [0, 300], }, ] }); </script>
Each object has a start and end which is essentially a percentage for the height of the lottie container and is a value between 0 and 1. The visibility arrays first value is the start and the second value is the end. This refers to the percentage of the viewport.
Ensure that the ending frame is the frame you want the interactivity to end at. This could be the last frame or a frame of your choosing. In this case it is set to 100.
Configuration modes include "scroll" where the animation will be synced to the scrolling of the window and "cursor" where the scrolling of the animation will be synced to the cursor position within the container.
The configuration can include a container field as shown in the next example. If a container is not provided the parent div will be taken as a container.
Updated
Comments
0 comments
Article is closed for comments.