<div class="lottie " data-autoplay="true" data-lottie-src="" style="aspect-ratio: / ;">
<lottie-player autoplay loop mode="normal" src="https://assets9.lottiefiles.com/datafiles/MUp3wlMDGtoK5FK/data.json" class="lottie__player"></lottie-player>
<span class="h-visually-hidden">
Animation alt text
</span>
</div>
<div class="lottie {{ class }} {{ modifier }} {% if data.image %}lottie--w-image{% endif %}" data-autoplay="{{ data.loadWhenInView }}" {{ data.attributes }} data-lottie-src="{{ data.lottieSrc }}" style="aspect-ratio: {{ data.image.aspectRatio.width }} / {{ data.image.aspectRatio.height }};">
{% if data.image %}
{% include '@image' with {
data: data.image|srcset('1440x1440f'),
class: 'lottie__image',
modifier: 'image--fluid',
eager: true,
} %}
{% endif %}
<lottie-player autoplay loop mode="normal" src="{{ data.lottieMedia }}" class="lottie__player"></lottie-player>
<span class="h-visually-hidden">
{{ data.altText }}
</span>
</div>
{
"language": "en-US",
"data": {
"loadWhenInView": true,
"altText": "Animation alt text",
"lottieMedia": "https://assets9.lottiefiles.com/datafiles/MUp3wlMDGtoK5FK/data.json"
}
}
.lottie {
width: 100%;
position: relative;
overflow: hidden;
svg {
display: block;
width: 100% !important; // Overwrite inline styles added by script
max-height: 100% !important;
object-fit: contain; /* stylelint-disable-line */
}
}
.lottie__image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 1;
transition: opacity $transition-easing $transition-duration;
.lottie.is-playing & {
opacity: 0;
}
}
import Component from '../component/component';
import Helpers from '../helpers/helpers';
import './lottie.scss';
interface ILottiePlayerElement extends HTMLElement {
load(src: string): void;
play(): void;
stop(): void;
pause(): void;
}
export default class Lottie extends Component {
public static initSelector: string = '.lottie';
private isInitialized: boolean = false;
private scrollDebounce: number | undefined;
constructor(element: HTMLElement) {
super(element);
this.setupListeners();
if (this.element.data('autoplay')) {
this.handleWindowScroll();
}
$(document).on('open-modal', this.handleModalOpen);
}
setupListeners: () => void = (): void => {
this.element.find('lottie-player').on('frame', this.onPlay);
$(window).on('scroll', this.handleWindowScroll);
$(window).on('resize', this.handleWindowScroll);
$(window).on('mousemove', this.handleWindowScroll);
$(window).on('click', this.handleWindowScroll);
};
onPlay: () => void = (): void => {
this.element.addClass('is-playing');
this.element.find('.lottie__player').get(0).shadowRoot.querySelector('svg').style.height = 'auto';
this.element.find('.lottie__player').get(0).shadowRoot.querySelector('svg').style.maxHeight = '100%';
};
destroy(): void {
$(window).off('click', this.handleWindowScroll);
$(window).off('mousemove', this.handleWindowScroll);
$(window).off('scroll', this.handleWindowScroll);
$(window).off('resize', this.handleWindowScroll);
$(document).off('open-modal', this.handleModalOpen);
}
handleWindowScroll: () => void = (): void => {
if (!this.isInitialized) {
$(window).off('mousemove', this.handleWindowScroll);
$(window).off('click', this.handleWindowScroll);
this.isInitialized = true;
}
if (this.scrollDebounce) {
window.clearTimeout(this.scrollDebounce);
}
this.scrollDebounce = window.setTimeout(this.loadOnDemand, 200);
};
loadOnDemand: () => void = (): void => {
if (Helpers.isOnScreen(this.element)) {
$(window).off('scroll', this.handleWindowScroll);
import(
/* webpackChunkName: "regenerator-runtime" */
/* webpackMode: "lazy" */
'regenerator-runtime/runtime'
)
.then((): void => {
import(
/* webpackChunkName: "lottie-player" */
/* webpackMode: "lazy" */
'@lottiefiles/lottie-player'
)
.catch(() => null);
})
.catch(() => null);
}
};
// eslint-disable-next-line @typescript-eslint/typedef
handleModalOpen: (event: JQuery.TriggeredEvent) => void = async (event): Promise<void> => {
// eslint-disable-next-line @typescript-eslint/typedef
const modal = $(event.target);
modal.find('[data-modal-lottie="true"]').each((_: number, el: HTMLElement): void => {
const lottiePlayer: ILottiePlayerElement = $(el).find('lottie-player').get(0) as ILottiePlayerElement;
const lottieSrc: string = $(el).data('lottie-src');
if (lottiePlayer && lottieSrc) {
$(lottiePlayer).attr('src', lottieSrc);
lottiePlayer.load(lottieSrc);
lottiePlayer.play();
}
});
};
}
<div class="lottie lottie--w-image" data-autoplay="true" data-lottie-src="" style="aspect-ratio: / ;">
<figure class="image image--fluid lottie__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%201440%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/200x138 200w, //via.placeholder.com/600x416 600w, //via.placeholder.com/530x368 530w, //via.placeholder.com/1060x736 1060w, //via.placeholder.com/680x472 680w, //via.placeholder.com/1360x944 1360w, //via.placeholder.com/220x152 220w, //via.placeholder.com/440x305 440w, //via.placeholder.com/1440x1000 1440w, //via.placeholder.com/2880x2000 2880w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<lottie-player autoplay loop mode="normal" src="https://assets9.lottiefiles.com/datafiles/MUp3wlMDGtoK5FK/data.json" class="lottie__player"></lottie-player>
<span class="h-visually-hidden">
Animation alt text
</span>
</div>
<div class="lottie {{ class }} {{ modifier }} {% if data.image %}lottie--w-image{% endif %}" data-autoplay="{{ data.loadWhenInView }}" {{ data.attributes }} data-lottie-src="{{ data.lottieSrc }}" style="aspect-ratio: {{ data.image.aspectRatio.width }} / {{ data.image.aspectRatio.height }};">
{% if data.image %}
{% include '@image' with {
data: data.image|srcset('1440x1440f'),
class: 'lottie__image',
modifier: 'image--fluid',
eager: true,
} %}
{% endif %}
<lottie-player autoplay loop mode="normal" src="{{ data.lottieMedia }}" class="lottie__player"></lottie-player>
<span class="h-visually-hidden">
{{ data.altText }}
</span>
</div>
{
"language": "en-US",
"data": {
"loadWhenInView": true,
"altText": "Animation alt text",
"lottieMedia": "https://assets9.lottiefiles.com/datafiles/MUp3wlMDGtoK5FK/data.json",
"image": true
}
}
.lottie {
width: 100%;
position: relative;
overflow: hidden;
svg {
display: block;
width: 100% !important; // Overwrite inline styles added by script
max-height: 100% !important;
object-fit: contain; /* stylelint-disable-line */
}
}
.lottie__image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 1;
transition: opacity $transition-easing $transition-duration;
.lottie.is-playing & {
opacity: 0;
}
}
import Component from '../component/component';
import Helpers from '../helpers/helpers';
import './lottie.scss';
interface ILottiePlayerElement extends HTMLElement {
load(src: string): void;
play(): void;
stop(): void;
pause(): void;
}
export default class Lottie extends Component {
public static initSelector: string = '.lottie';
private isInitialized: boolean = false;
private scrollDebounce: number | undefined;
constructor(element: HTMLElement) {
super(element);
this.setupListeners();
if (this.element.data('autoplay')) {
this.handleWindowScroll();
}
$(document).on('open-modal', this.handleModalOpen);
}
setupListeners: () => void = (): void => {
this.element.find('lottie-player').on('frame', this.onPlay);
$(window).on('scroll', this.handleWindowScroll);
$(window).on('resize', this.handleWindowScroll);
$(window).on('mousemove', this.handleWindowScroll);
$(window).on('click', this.handleWindowScroll);
};
onPlay: () => void = (): void => {
this.element.addClass('is-playing');
this.element.find('.lottie__player').get(0).shadowRoot.querySelector('svg').style.height = 'auto';
this.element.find('.lottie__player').get(0).shadowRoot.querySelector('svg').style.maxHeight = '100%';
};
destroy(): void {
$(window).off('click', this.handleWindowScroll);
$(window).off('mousemove', this.handleWindowScroll);
$(window).off('scroll', this.handleWindowScroll);
$(window).off('resize', this.handleWindowScroll);
$(document).off('open-modal', this.handleModalOpen);
}
handleWindowScroll: () => void = (): void => {
if (!this.isInitialized) {
$(window).off('mousemove', this.handleWindowScroll);
$(window).off('click', this.handleWindowScroll);
this.isInitialized = true;
}
if (this.scrollDebounce) {
window.clearTimeout(this.scrollDebounce);
}
this.scrollDebounce = window.setTimeout(this.loadOnDemand, 200);
};
loadOnDemand: () => void = (): void => {
if (Helpers.isOnScreen(this.element)) {
$(window).off('scroll', this.handleWindowScroll);
import(
/* webpackChunkName: "regenerator-runtime" */
/* webpackMode: "lazy" */
'regenerator-runtime/runtime'
)
.then((): void => {
import(
/* webpackChunkName: "lottie-player" */
/* webpackMode: "lazy" */
'@lottiefiles/lottie-player'
)
.catch(() => null);
})
.catch(() => null);
}
};
// eslint-disable-next-line @typescript-eslint/typedef
handleModalOpen: (event: JQuery.TriggeredEvent) => void = async (event): Promise<void> => {
// eslint-disable-next-line @typescript-eslint/typedef
const modal = $(event.target);
modal.find('[data-modal-lottie="true"]').each((_: number, el: HTMLElement): void => {
const lottiePlayer: ILottiePlayerElement = $(el).find('lottie-player').get(0) as ILottiePlayerElement;
const lottieSrc: string = $(el).data('lottie-src');
if (lottiePlayer && lottieSrc) {
$(lottiePlayer).attr('src', lottieSrc);
lottiePlayer.load(lottieSrc);
lottiePlayer.play();
}
});
};
}