Lottie Animation Block

Accessing the Lottie instance and attributes

const $el = $('[data-lottie-src]').first();

// Lottie instance (AnimationItem)
const anim = $el.data('lottie-object');

// Source path from the markup
const src = $el.data('lottie-src'); // same as $el.attr('data-lottie-src')

Important:

Use $el.data('lottie-object') to access the Lottie object (instance).
If you need the source path, use $el.data('lottie-src').
Note: $el.data('data-lottie-src') is not valid; use $el.data('lottie-src') for the path and $el.data('lottie-object') for the instance.

Play and pause

const $el = $('[data-lottie-src]').first();
const anim = $el.data('lottie-object');

// Play from current position
anim.play();

// Pause at current frame
anim.pause();

// Start over from the first frame
anim.goToAndPlay(0, true);

Run an action when the animation ends

If you want to act after the animation finishes once, set loop: false in data-lottie-options, then listen to the complete event and trigger your action.

const $el = $('[data-lottie-src]').first();
const anim = $el.data('lottie-object');

function onComplete() {
  // Example: advance to the next screen
  w2w.moveToNextScreen();

  // If you only want to run once, detach the listener
  anim.removeEventListener('complete', onComplete);
}

anim.addEventListener('complete', onComplete);

Other useful controls

anim.stop();                 // stop and reset to first frame
anim.setSpeed(1.5);          // speed multiplier
anim.setDirection(-1);       // play in reverse
anim.goToAndStop(120, true); // jump to frame 120 and stop
anim.playSegments([0, 90], true); // play a frame segment

Notes

The library version used is lottie-web (bodymovin) 5.10.2, loaded from CDN when needed.
If your block is added dynamically after page load, call initLottieAnimations() again for new elements.