(function (){
function init(selector, options){
const { mergeObjects }=BreakdanceFrontend.utils;
const optionDefaults={
loop_animation: false,
asset_url:
"https://assets7.lottiefiles.com/private_files/lf30_t7xfgnn4.json",
animation_speed: 1,
trigger: "viewport",
hover_area: "animation",
on_hover_out: "default",
on_viewport_out: "default",
times_to_loop: null,
reverse_on_finish: null,
frames: [0, 100]
};
if(options.trigger==="hover"){
options.reverse_on_finish=null;
}
const settings=mergeObjects(optionDefaults, options);
const element=document.querySelector(selector);
if(!element) return;
destroyAnimationAndClearEvents(element, selector);
const animation=lottie.loadAnimation({
container: element,
renderer: "svg",
loop: false,
autoplay: false,
path: settings.asset_url
});
if(!window.BreakdanceLottieInstances){
window.BreakdanceLottieInstances={};}
window.BreakdanceLottieInstances[selector]={
animation,
settings,
onHoverOut: ()=> _onHoverOut(animation, settings),
playAnimation: ()=> _playAnimation(animation),
playAnimationFromStart: ()=> _playAnimationFromStart(animation),
viewportObserver: null
};
const setInitialValuesOnDomLoaded=()=> {
registerAnimationSegments(animation, settings);
registerTrigger(element, selector, animation, settings);
animation.setSpeed(settings.animation_speed);
startLoopAndReverse(animation, settings);
animation.removeEventListener("DOMLoaded", setInitialValuesOnDomLoaded);
};
animation.addEventListener("DOMLoaded", setInitialValuesOnDomLoaded);
}
function registerTrigger(element, selector, animation, settings){
switch (settings.trigger){
case "click":
element.addEventListener("click",
window.BreakdanceLottieInstances[selector].playAnimationFromStart
);
break;
case "hover":
addHoverEventListeners(selector, element, settings);
break;
case "viewport":
addViewportEventListener(element, selector, animation);
break;
case "none":
default:
_playAnimationFromStart(animation);
break;
}}
function startLoopAndReverse(animation, settings){
let loop=0;
animation.onComplete=()=> {
if(settings.reverse_on_finish){
const newDirection=animation.playDirection * -1;
animation.setDirection(newDirection);
animation.play();
if(newDirection===1){
loop++;
}}else{
_playAnimation(animation, settings);
loop++;
}
if((settings.times_to_loop > 0&&loop >=settings.times_to_loop) ||
(!settings.loop_animation&&loop >=1)
){
animation.stop();
}};}
function addHoverEventListeners(selector, element, settings){
const hoverElement=getElementToAttachHoverListenersTo(element, settings);
if(!hoverElement) return;
const instance=getLottieInstance(selector);
if(!instance) return;
hoverElement.addEventListener("mouseover", instance.playAnimation);
hoverElement.addEventListener("mouseout", instance.onHoverOut);
}
function addViewportEventListener(element, selector, animation){
let options={
threshold: 0.5
};
const instance=getLottieInstance(selector);
if(!instance) return;
let observer=new IntersectionObserver(entries=> {
const entry=entries[0];
if(entry.isIntersecting){
_playAnimation(animation);
}}, options);
observer.observe(element);
window.BreakdanceLottieInstances[selector].viewportObserver=observer;
}
function destroyAnimationAndClearEvents(element, selector){
const previousInstance=getLottieInstance(selector);
if(previousInstance){
previousInstance.animation.destroy();
const oldSettings=previousInstance.settings;
element.removeEventListener("click",
previousInstance.playAnimationFromStart
);
const hoverElement=getElementToAttachHoverListenersTo(
element,
oldSettings
);
if(hoverElement){
hoverElement.removeEventListener("mouseover",
previousInstance.playAnimation
);
hoverElement.removeEventListener("mouseout",
previousInstance.onHoverOut
);
}
if(previousInstance.viewportObserver){
previousInstance.viewportObserver.unobserve(element);
}}
}
function getElementToAttachHoverListenersTo(element, settings){
let elementToAttachHoverEventTo=element;
if(settings.hover_area==="parent"){
elementToAttachHoverEventTo=element.parentElement;
}else if(settings.hover_area==="section"){
elementToAttachHoverEventTo=element.parentElement.closest("section");
}
if(!elementToAttachHoverEventTo) return false;
return elementToAttachHoverEventTo;
}
function getLottieInstance(selector){
if(window.BreakdanceLottieInstances &&
window.BreakdanceLottieInstances[selector]
){
return window.BreakdanceLottieInstances[selector];
}
return null;
}
function _onHoverOut(animation, settings){
if(settings.on_hover_out==="pause"){
animation.pause();
}else if(settings.on_hover_out==="reverse"){
animation.setDirection(-1);
}}
function animationReachedLastFrame(animation){
return animation.currentFrame + 1 >=animation.totalFrames;
}
function _playAnimation(animation){
if(animationReachedLastFrame(animation)){
_playAnimationFromStart(animation);
}else{
animation.setDirection(1);
animation.play();
}}
function _playAnimationFromStart(animation){
if(animation.isPaused){
animation.goToAndPlay(0);
}}
function registerAnimationSegments(animation, settings){
const totalFrames=animation.totalFrames;
const startingFrame=totalFrames * (settings.frames[0] / 100);
const finalFrame=totalFrames * (settings.frames[1] / 100);
animation.playSegments([startingFrame, finalFrame], true);
animation.stop();
}
window.BreakdanceLottie=init;
})();