@aarsteinmedia/dotlottie-player 6.4.10 → 6.5.1

package/dist/chunks/{DotLottiePlayerBase-DdpA5NST.js → DotLottiePlayerBase-BfEbTiu6.js}

@@ -71,7 +71,7 @@ if (isServer) {
     }
 }
 
-var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-toolbar-height: 35px;\n  --lottie-player-toolbar-background-color: #fff;\n  --lottie-player-toolbar-icon-color: #000;\n  --lottie-player-toolbar-icon-hover-color: #000;\n  --lottie-player-toolbar-icon-active-color: #4285f4;\n  --lottie-player-seeker-track-color: rgb(0 0 0 / 20%);\n  --lottie-player-seeker-thumb-color: #4285f4;\n  --lottie-player-seeker-display: block;\n\n  width: 100%;\n  height: 100%;\n\n  &:not([hidden]) {\n    display: block;\n  }\n\n  .main {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n  }\n\n  .animation {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    margin: 0;\n    padding: 0;\n  }\n\n  [data-controls='true'] .animation {\n    height: calc(100% - 35px);\n  }\n\n  .animation-container {\n    position: relative;\n  }\n\n  .popover {\n    position: absolute;\n    right: 5px;\n    bottom: 40px;\n    background-color: var(--lottie-player-toolbar-background-color);\n    border-radius: 5px;\n    padding: 10px 15px;\n    border: solid 2px var(--lottie-player-toolbar-icon-color);\n    animation: fade-in 0.2s ease-in-out;\n\n    &::before {\n      content: '';\n      right: 10px;\n      border: 7px solid transparent;\n      margin-right: -7px;\n      height: 0;\n      width: 0;\n      position: absolute;\n      pointer-events: none;\n      top: 100%;\n      border-top-color: var(--lottie-player-toolbar-icon-color);\n    }\n  }\n\n  .error {\n    display: flex;\n    margin: auto;\n    justify-content: center;\n    height: 100%;\n    align-items: center;\n\n    & svg {\n      width: 100%;\n      height: auto;\n    }\n  }\n\n  .toolbar {\n    display: flex;\n    place-items: center center;\n    background: var(--lottie-player-toolbar-background-color);\n    margin: 0;\n    height: 35px;\n    padding: 5px;\n    border-radius: 5px;\n    gap: 5px;\n\n    &.has-error {\n      pointer-events: none;\n      opacity: 0.5;\n    }\n\n    & button {\n      cursor: pointer;\n      fill: var(--lottie-player-toolbar-icon-color);\n      color: var(--lottie-player-toolbar-icon-color);\n      background: none;\n      border: 0;\n      padding: 0;\n      outline: 0;\n      height: 100%;\n      margin: 0;\n      align-items: center;\n      gap: 5px;\n      opacity: 0.9;\n\n      &:not([hidden]) {\n        display: flex;\n      }\n\n      &:hover {\n        opacity: 1;\n      }\n\n      &[data-active='true'] {\n        opacity: 1;\n        fill: var(--lottie-player-toolbar-icon-active-color);\n      }\n\n      &:disabled {\n        opacity: 0.5;\n      }\n\n      &:focus {\n        outline: 0;\n      }\n\n      & svg {\n        pointer-events: none;\n\n        & > * {\n          fill: inherit;\n        }\n      }\n\n      &.disabled svg {\n        display: none;\n      }\n    }\n  }\n\n  .progress-container {\n    position: relative;\n    width: 100%;\n\n    &.simple {\n      margin-right: 12px;\n    }\n  }\n\n  & progress {\n    appearance: none;\n    outline: none;\n    position: absolute;\n    width: 100%;\n    height: 5px;\n    border-radius: 3px;\n    border: 0;\n    top: 0;\n    left: 0;\n    margin: 7.5px 0;\n    background-color: var(--lottie-player-seeker-track-color);\n    pointer-events: none;\n\n    &::-webkit-progress-inner-element {\n      border-radius: 3px;\n      overflow: hidden;\n    }\n\n    &::-webkit-slider-runnable-track {\n      background-color: transparent;\n    }\n\n    &::-webkit-progress-value {\n      background-color: var(--lottie-player-seeker-thumb-color);\n    }\n  }\n\n  .seeker {\n    appearance: none;\n    outline: none;\n    width: 100%;\n    height: 20px;\n    border-radius: 3px;\n    border: 0;\n    cursor: pointer;\n    background-color: transparent;\n\n    display: var(--lottie-player-seeker-display);\n    color: var(--lottie-player-seeker-thumb-color);\n    margin: 0;\n    padding: 7.5px 0;\n    position: relative;\n    z-index: 1;\n\n    &::-webkit-slider-runnable-track,\n    &::-webkit-slider-thumb {\n      appearance: none;\n      outline: none;\n    }\n\n    &::-webkit-slider-thumb {\n      height: 15px;\n      width: 15px;\n      border-radius: 50%;\n      border: 0;\n      background-color: var(--lottie-player-seeker-thumb-color);\n      cursor: pointer;\n      -webkit-transition: transform 0.2s ease-in-out;\n      transition: transform 0.2s ease-in-out;\n      transform: scale(0);\n    }\n\n    &:hover::-webkit-slider-thumb,\n    &:focus::-webkit-slider-thumb {\n      transform: scale(1);\n    }\n\n    &::-moz-range-progress {\n      background-color: var(--lottie-player-seeker-thumb-color);\n      height: 5px;\n      border-radius: 3px;\n    }\n\n    &::-moz-range-thumb {\n      height: 15px;\n      width: 15px;\n      border-radius: 50%;\n      background-color: var(--lottie-player-seeker-thumb-color);\n      border: 0;\n      cursor: pointer;\n      -moz-transition: transform 0.2s ease-in-out;\n      transition: transform 0.2s ease-in-out;\n      transform: scale(0);\n    }\n\n    &:hover::-moz-range-thumb,\n    &:focus::-moz-range-thumb {\n      transform: scale(1);\n    }\n\n    &::-ms-track {\n      width: 100%;\n      height: 5px;\n      cursor: pointer;\n      background: transparent;\n      border-color: transparent;\n      color: transparent;\n    }\n\n    &::-ms-fill-upper {\n      background: var(--lottie-player-seeker-track-color);\n      border-radius: 3px;\n    }\n\n    &::-ms-fill-lower {\n      background-color: var(--lottie-player-seeker-thumb-color);\n      border-radius: 3px;\n    }\n\n    &::-ms-thumb {\n      border: 0;\n      height: 15px;\n      width: 15px;\n      border-radius: 50%;\n      background: var(--lottie-player-seeker-thumb-color);\n      cursor: pointer;\n      -ms-transition: transform 0.2s ease-in-out;\n      transition: transform 0.2s ease-in-out;\n      transform: scale(0);\n    }\n\n    &:hover::-ms-thumb {\n      transform: scale(1);\n    }\n\n    &:focus {\n      &::-ms-thumb {\n        transform: scale(1);\n      }\n\n      &::-ms-fill-lower,\n      &::-ms-fill-upper {\n        background: var(--lottie-player-seeker-track-color);\n      }\n    }\n  }\n\n  & *::-moz-progress-bar {\n    background-color: var(--lottie-player-seeker-thumb-color);\n  }\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  :host {\n    --lottie-player-toolbar-background-color: #000;\n    --lottie-player-toolbar-icon-color: #fff;\n    --lottie-player-toolbar-icon-hover-color: #fff;\n    --lottie-player-seeker-track-color: rgb(255 255 255 / 60%);\n  }\n}\n";
+var css_248z = "*{box-sizing:border-box}:host{--lottie-player-toolbar-height:35px;--lottie-player-toolbar-background-color:#fff;--lottie-player-toolbar-icon-color:#000;--lottie-player-toolbar-icon-hover-color:#000;--lottie-player-toolbar-icon-active-color:#4285f4;--lottie-player-seeker-track-color:#0003;--lottie-player-seeker-thumb-color:#4285f4;--lottie-player-seeker-display:block;height:100%;width:100%;&:not([hidden]){display:block}.main{display:flex;flex-direction:column;height:100%;margin:0;padding:0;width:100%}.animation{contain:content;display:flex;height:100%;margin:0;padding:0;width:100%;& svg g{will-change:transform}}[data-controls=true] .animation{height:calc(100% - 35px)}.animation-container{position:relative}.popover{animation:fade-in .2s ease-in-out;background-color:var(--lottie-player-toolbar-background-color);border:2px solid var(--lottie-player-toolbar-icon-color);border-radius:5px;bottom:40px;padding:10px 15px;position:absolute;right:5px;&:before{border:7px solid #0000;border-top:7px solid var(--lottie-player-toolbar-icon-color);content:\"\";height:0;margin-right:-7px;pointer-events:none;position:absolute;right:10px;top:100%;width:0}}.error{align-items:center;display:flex;height:100%;justify-content:center;margin:auto;& svg{height:auto;width:100%}}.toolbar{background:var(--lottie-player-toolbar-background-color);border-radius:5px;display:flex;gap:5px;height:35px;margin:0;padding:5px;place-items:center center;&.has-error{opacity:.5;pointer-events:none}& button{fill:var(--lottie-player-toolbar-icon-color);align-items:center;background:none;border:0;color:var(--lottie-player-toolbar-icon-color);cursor:pointer;gap:5px;height:100%;margin:0;opacity:.9;outline:0;padding:0;&:not([hidden]){display:flex}&:hover{opacity:1}&[data-active=true]{fill:var(--lottie-player-toolbar-icon-active-color);opacity:1}&:disabled{opacity:.5}&:focus{outline:0}& svg{pointer-events:none;&>*{fill:inherit}}&.disabled svg{display:none}}}.progress-container{position:relative;width:100%;&.simple{margin-right:12px}}& progress{appearance:none;background-color:var(--lottie-player-seeker-track-color);border:0;border-radius:3px;height:5px;left:0;margin:7.5px 0;outline:none;pointer-events:none;position:absolute;top:0;width:100%;&::-webkit-progress-inner-element{border-radius:3px;overflow:hidden}&::-webkit-slider-runnable-track{background-color:initial}&::-webkit-progress-value{background-color:var(--lottie-player-seeker-thumb-color)}}.seeker{appearance:none;background-color:initial;border:0;border-radius:3px;color:var(--lottie-player-seeker-thumb-color);cursor:pointer;display:var(--lottie-player-seeker-display);height:20px;margin:0;outline:none;padding:7.5px 0;position:relative;width:100%;z-index:1;&::-webkit-slider-runnable-track,&::-webkit-slider-thumb{appearance:none;outline:none}&::-webkit-slider-thumb{background-color:var(--lottie-player-seeker-thumb-color);border:0;border-radius:50%;cursor:pointer;height:15px;transform:scale(0);-webkit-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;width:15px}&:focus::-webkit-slider-thumb,&:hover::-webkit-slider-thumb{transform:scale(1)}&::-moz-range-progress{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px;height:5px}&::-moz-range-thumb{background-color:var(--lottie-player-seeker-thumb-color);border:0;border-radius:50%;cursor:pointer;height:15px;transform:scale(0);-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;width:15px}&:focus::-moz-range-thumb,&:hover::-moz-range-thumb{transform:scale(1)}&::-ms-track{background:#0000;border-color:#0000;color:#0000;cursor:pointer;height:5px;width:100%}&::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}&::-ms-fill-lower{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px}&::-ms-thumb{background:var(--lottie-player-seeker-thumb-color);border:0;border-radius:50%;cursor:pointer;height:15px;transform:scale(0);-ms-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;width:15px}&:hover::-ms-thumb{transform:scale(1)}&:focus{&::-ms-thumb{transform:scale(1)}&::-ms-fill-lower,&::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}}}& ::-moz-progress-bar{background-color:var(--lottie-player-seeker-thumb-color)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (prefers-color-scheme:dark){:host{--lottie-player-toolbar-background-color:#000;--lottie-player-toolbar-icon-color:#fff;--lottie-player-toolbar-icon-hover-color:#fff;--lottie-player-seeker-track-color:#fff9}}";
 
 let dotlottieTools = null, loadPromise = null;
 function loadDotLottieTools() {
@@ -92,87 +92,25 @@ function loadDotLottieTools() {
     return loadPromise;
 }
 
-const boomerangIcon = /* HTML */ `
-  <svg width="24" height="24" aria-hidden="true" focusable="false">
-    <path
-      d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"
-    />
-  </svg>
-`;
+const boomerangIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"/></svg>`;
 
-const convertIcon = /* HTML */ `
-  <svg
-    width="24"
-    height="24"
-    aria-hidden="true"
-    focusable="false"
-  >
-    <path
-      d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"
-    />
-  </svg>
-`;
+const convertIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg>`;
 
-const downloadIcon = /* HTML */ `
-  <svg
-    width="24"
-    height="24"
-    aria-hidden="true"
-    focusable="false"
-  >
-    <path
-      d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"
-    />
-  </svg>
-`;
+const downloadIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"/></svg>`;
 
-const loopIcon = /* HTML */ `
-  <svg width="24" height="24" aria-hidden="true" focusable="false">
-    <path
-      d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"
-    />
-  </svg>
-`;
+const loopIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg>`;
 
-const nextIcon = /* HTML */ `
-  <svg width="24" height="24" aria-hidden="true" focusable="false">
-    <path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z" />
-  </svg>
-`;
+const nextIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"/></svg>`;
 
-const pauseIcon = /* HTML */ `
-  <svg width="24" height="24" aria-hidden="true" focusable="false">
-    <path
-      d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"
-    />
-  </svg>
-`;
+const pauseIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"/></svg>`;
 
-const playIcon = /* HTML */ `
-  <svg width="24" height="24" aria-hidden="true" focusable="false">
-    <path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
-  </svg>
-`;
+const playIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z"/></svg>`;
 
-const prevIcon = /* HTML */ `
-  <svg width="24" height="24" aria-hidden="true" focusable="false">
-    <path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z" />
-  </svg>
-`;
+const prevIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"/></svg>`;
 
-const settingsIcon = /* HTML */ `
-  <svg width="24" height="24" aria-hidden="true" focusable="false">
-    <circle cx="12" cy="5.4" r="2.5" />
-    <circle cx="12" cy="12" r="2.5" />
-    <circle cx="12" cy="18.6" r="2.5" />
-  </svg>
-`;
+const settingsIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><circle cx="12" cy="5.4" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="12" cy="18.6" r="2.5"/></svg>`;
 
-const stopIcon = /* HTML */ `
-  <svg width="24" height="24" aria-hidden="true" focusable="false">
-    <path d="M6 6h12v12H6V6z" />
-  </svg>
-`;
+const stopIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg>`;
 
 var ObjectFit = /*#__PURE__*/ function(ObjectFit) {
     ObjectFit["Contain"] = "contain";
@@ -200,23 +138,49 @@ var PlayerState = /*#__PURE__*/ function(PlayerState) {
     PlayerState["Stopped"] = "stopped";
     return PlayerState;
 }({});
-const tagName = 'dotlottie-player';
 
-/**
- * Render Controls.
- */ function renderControls() {
+function advancedButtons() {
     if (!this.shadow) {
-        throw new Error('No Shadow Element');
-    }
-    const slot = this.shadow.querySelector('slot[name=controls]');
-    if (!slot) {
         return;
     }
-    if (!this.controls) {
-        slot.innerHTML = '';
+    const toggleLoop = this.shadow.querySelector('.toggleLoop');
+    if (toggleLoop instanceof HTMLButtonElement) {
+        toggleLoop.onclick = this.toggleLoop;
+    }
+    const toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
+    if (toggleBoomerang instanceof HTMLButtonElement) {
+        toggleBoomerang.onclick = this.toggleBoomerang;
+    }
+    const convertButton = this.shadow.querySelector('.convert');
+    if (convertButton instanceof HTMLButtonElement) {
+        convertButton.onclick = async ()=>{
+            convertButton.disabled = true;
+            try {
+                const { convert } = await loadDotLottieTools();
+                await convert({
+                    isDotLottie: this.isDotLottie,
+                    manifest: this.getManifest(),
+                    src: this.src || this.source
+                });
+            } finally{
+                convertButton.disabled = false;
+            }
+        };
+    }
+    const snapshot = this.shadow.querySelector('.snapshot');
+    if (snapshot instanceof HTMLButtonElement) {
+        snapshot.onclick = ()=>this.snapshot(true);
+    }
+    const toggleSettings = this.shadow.querySelector('.toggleSettings');
+    if (toggleSettings instanceof HTMLButtonElement) {
+        toggleSettings.onclick = this._handleSettingsClick;
+        toggleSettings.onblur = this._handleBlur;
+    }
+}
+function handleButtons() {
+    if (!this.shadow) {
         return;
     }
-    slot.innerHTML = /* HTML */ `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${playIcon}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${stopIcon}</button> <button class="prev" aria-label="Previous animation" hidden="false">${prevIcon}</button> <button class="next" aria-label="Next animation" hidden>${nextIcon}</button><form class="progress-container${this.simple ? ' simple' : ''}"><input type="range" class="seeker" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : /* HTML */ `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${loopIcon}</button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0">${boomerangIcon}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${this._isSettingsOpen}" aria-controls="${this._identifier}-settings">${settingsIcon}</button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" aria-label="Convert ${this.isDotLottie ? 'dotLottie animation to JSON format' : 'JSON animation to dotLottie format'}" hidden>${convertIcon} ${this.isDotLottie ? 'Convert to JSON' : 'Convert to dotLottie'}</button> <button class="snapshot" aria-label="Download still image">${downloadIcon} Download still image</button></div>`}</div>`;
     const togglePlay = this.shadow.querySelector('.togglePlay');
     if (togglePlay instanceof HTMLButtonElement) {
         togglePlay.onclick = this.togglePlay;
@@ -244,41 +208,28 @@ const tagName = 'dotlottie-player';
         seeker.onchange = this._handleSeekChange;
         seeker.onmousedown = this._freeze;
     }
-    if (!this.simple) {
-        const toggleLoop = this.shadow.querySelector('.toggleLoop');
-        if (toggleLoop instanceof HTMLButtonElement) {
-            toggleLoop.onclick = this.toggleLoop;
-        }
-        const toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
-        if (toggleBoomerang instanceof HTMLButtonElement) {
-            toggleBoomerang.onclick = this.toggleBoomerang;
-        }
-        const convertButton = this.shadow.querySelector('.convert');
-        if (convertButton instanceof HTMLButtonElement) {
-            convertButton.onclick = async ()=>{
-                convertButton.disabled = true;
-                try {
-                    const { convert } = await loadDotLottieTools();
-                    await convert({
-                        isDotLottie: this.isDotLottie,
-                        manifest: this.getManifest(),
-                        src: this.src || this.source
-                    });
-                } finally{
-                    convertButton.disabled = false;
-                }
-            };
-        }
-        const snapshot = this.shadow.querySelector('.snapshot');
-        if (snapshot instanceof HTMLButtonElement) {
-            snapshot.onclick = ()=>this.snapshot(true);
-        }
-        const toggleSettings = this.shadow.querySelector('.toggleSettings');
-        if (toggleSettings instanceof HTMLButtonElement) {
-            toggleSettings.onclick = this._handleSettingsClick;
-            toggleSettings.onblur = this._handleBlur;
-        }
+    if (this.simple) {
+        return;
+    }
+    advancedButtons.call(this);
+}
+/**
+ * Render Controls.
+ */ function renderControls() {
+    if (!this.shadow) {
+        throw new Error('No Shadow Element');
+    }
+    const slot = this.shadow.querySelector('slot[name=controls]');
+    if (!slot) {
+        return;
+    }
+    if (!this.controls) {
+        slot.innerHTML = '';
+        return;
     }
+    const convertLabel = this.isDotLottie ? 'dotLottie animation to JSON format' : 'JSON animation to dotLottie format', convertButtonText = this.isDotLottie ? 'Convert to JSON' : 'Convert to dotLottie';
+    slot.innerHTML = /* HTML */ `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${playIcon}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${stopIcon}</button> <button class="prev" aria-label="Previous animation" hidden="false">${prevIcon}</button> <button class="next" aria-label="Next animation" hidden>${nextIcon}</button><form class="progress-container${this.simple ? ' simple' : ''}"><input type="range" class="seeker" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : /* HTML */ `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${loopIcon}</button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0">${boomerangIcon}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${this._isSettingsOpen}" aria-controls="${this._identifier}-settings">${settingsIcon}</button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert ${convertLabel}" hidden>${convertIcon} ${convertButtonText}</button> <button class="snapshot" aria-label="Download still image">${downloadIcon} Download still image</button></div>`}</div>`;
+    handleButtons.call(this);
 }
 function updatePlayPauseButton(togglePlay, state) {
     const isActive = state === PlayerState.Playing || state === PlayerState.Paused;
@@ -310,9 +261,7 @@ var controls = /*#__PURE__*/Object.freeze({
         const lang = this.description ? document.documentElement.lang : 'en';
         langAttribute = `lang="${lang}"`;
     }
-    this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" ${langAttribute}><figure class="animation" style="background:${this.background}" ${this.description ? /* HTML */ `
-            aria-label="${this.description}"
-          ` : ''}></figure><slot name="controls"></slot></div>`;
+    this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" ${langAttribute}><figure class="animation" style="background:${this.background}" ${this.description ? `aria-label="${this.description}"` : ''}></figure><slot name="controls"></slot></div>`;
     this.shadow.adoptedStyleSheets = [
         await DotLottiePlayerBase.styles()
     ];
@@ -383,6 +332,8 @@ var controls = /*#__PURE__*/Object.freeze({
         '1'
     ].includes(val);
 
+const tagName = 'dotlottie-player', hasReducedMotion = !isServer && matchMedia('(prefers-reduced-motion: reduce)').matches, hasIOSupport = !isServer && 'IntersectionObserver' in window, hasVTSupport = !isServer && 'ViewTimeline' in window;
+
 const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     const styleSheet = new CSSStyleSheet();
     await styleSheet.replace(css_248z);
@@ -713,15 +664,14 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
    * Player state.
    */ this.playerState = PlayerState.Loading, /**
    * Animation Container.
-   */ this._container = null, this._DOMRect = null, this._errorMessage = 'Something went wrong', this._identifier = this.id || createElementID(), /**
+   */ this._container = null, this._errorMessage = 'Something went wrong', this._identifier = this.id || createElementID(), /**
    * Whether settings toolbar is open.
    */ this._isSettingsOpen = false, this._playerState = {
             count: 0,
+            frame: 0,
             loaded: false,
-            prev: PlayerState.Loading,
-            scrollTimeout: null,
-            scrollY: 0,
-            visible: false
+            playTimeout: null,
+            prev: PlayerState.Loading
         }, this._render = renderPlayer, /**
    * Seeker.
    */ this._seeker = 0, /**
@@ -730,7 +680,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
    * on load, if controls are visible.
    */ this._animations = [], this._controlsLoadId = 0, /**
    * Which animation to show, if several.
-   */ this._currentAnimation = 0, this._errorLoadId = 0, this._isBounce = false, this._isDotLottie = false, this._lottieInstance = null, /**
+   */ this._currentAnimation = 0, this._errorLoadId = 0, this._isBounce = false, this._isDotLottie = false, this._isIntersecting = false, this._lottieInstance = null, /**
    * Multi-animation settings.
    */ this._multiAnimationSettings = [], this._renderControls = async ()=>{
             const slot = this.shadow?.querySelector('slot[name=controls]');
@@ -755,13 +705,13 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         this._freeze = this._freeze.bind(this);
         this._handleBlur = this._handleBlur.bind(this);
         this._handleClick = this._handleClick.bind(this);
-        this._handleScroll = this._handleScroll.bind(this);
         this._handleSeekChange = this._handleSeekChange.bind(this);
         this._handleWindowBlur = this._handleWindowBlur.bind(this);
         this._loopComplete = this._loopComplete.bind(this);
         this._mouseEnter = this._mouseEnter.bind(this);
         this._mouseLeave = this._mouseLeave.bind(this);
         this._onVisibilityChange = this._onVisibilityChange.bind(this);
+        this._scrollLoop = this._scrollLoop.bind(this);
         this._switchInstance = this._switchInstance.bind(this);
         this._handleSettingsClick = this._handleSettingsClick.bind(this);
         this.togglePlay = this.togglePlay.bind(this);
@@ -782,7 +732,8 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     }
     /**
    * Runs when the value of an attribute is changed on the component.
-   */ async attributeChangedCallback(name, _oldValue, value) {
+   */ // eslint-disable-next-line sonarjs/cognitive-complexity
+    async attributeChangedCallback(name, _oldValue, value) {
         if (!this._lottieInstance || !this.shadow || !this._container) {
             return;
         }
@@ -791,18 +742,17 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
                 {
                     if (value === '' || Boolean(value)) {
                         this._lottieInstance.autoplay = false;
-                        addEventListener('scroll', this._handleScroll, {
-                            capture: true,
-                            passive: true
-                        });
+                        if (this._isIntersecting) {
+                            this._startScrollLoop();
+                        }
                         return;
                     }
-                    removeEventListener('scroll', this._handleScroll, true);
+                    this._stopScrollLoop();
                     break;
                 }
             case 'autoplay':
                 {
-                    if (this.animateOnScroll || this.playOnVisible) {
+                    if (this.animateOnScroll || this.playOnVisible || hasReducedMotion) {
                         return;
                     }
                     if (value === '' || Boolean(value)) {
@@ -905,8 +855,8 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
    * Initialize everything on component first render.
    */ connectedCallback() {
         super.connectedCallback();
-        try {
-            void (async ()=>{
+        void (async ()=>{
+            try {
                 await this._render();
                 if (!this.shadow) {
                     throw new Error('Missing Shadow element');
@@ -918,16 +868,13 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
                 if (typeof document.hidden !== 'undefined') {
                     document.addEventListener('visibilitychange', this._onVisibilityChange);
                 }
-                if (this._container) {
-                    this._DOMRect = this._container.getBoundingClientRect();
-                }
                 // Add intersection observer for detecting component being out-of-view.
                 this._addIntersectionObserver();
                 this.dispatchEvent(new CustomEvent(PlayerEvent.Rendered));
-            })();
-        } catch (error) {
-            void this._handleError(error);
-        }
+            } catch (error) {
+                void this._handleError(error);
+            }
+        })();
     }
     convert(_params) {
         throw new Error(notImplemented);
@@ -938,9 +885,11 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         if (!this._lottieInstance?.destroy) {
             return;
         }
+        this._cancelScrollProbe();
         this.playerState = PlayerState.Destroyed;
         this._lottieInstance.destroy();
         this._lottieInstance = null;
+        this._stopScrollLoop();
         this.dispatchEvent(new CustomEvent(PlayerEvent.Destroyed));
         this.remove();
         document.removeEventListener('visibilitychange', this._onVisibilityChange);
@@ -949,9 +898,14 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
    * Cleanup on component destroy.
    */ disconnectedCallback() {
         // Remove intersection observer for detecting component being out-of-view
-        if (this._intersectionObserver) {
-            this._intersectionObserver.disconnect();
-            this._intersectionObserver = undefined;
+        this._intersectionObserver?.disconnect();
+        this._intersectionObserver = undefined;
+        this._cancelScrollProbe();
+        if (this._playerState.scrollLoopId) {
+            cancelAnimationFrame(this._playerState.scrollLoopId);
+        }
+        if (this._playerState.playTimeout) {
+            clearTimeout(this._playerState.playTimeout);
         }
         // Remove the attached Visibility API's change event listener
         document.removeEventListener('visibilitychange', this._onVisibilityChange);
@@ -991,19 +945,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             if (!animations?.every(isLottie)) {
                 throw new Error('Broken or corrupted file');
             }
-            const ldScript = this.parentElement?.querySelector('script[type="application/ld+json"]');
-            if (ldScript) {
-                const settings = JSON.parse(ldScript.innerHTML);
-                if (settings.selector) {
-                    this.selector = settings.selector;
-                }
-                if (settings.segment) {
-                    this.setSegment(settings.segment);
-                }
-                if (settings.multiAnimationSettings) {
-                    this.setMultiAnimationSettings(settings.multiAnimationSettings);
-                }
-            }
+            this._handleLdScript();
             this._isBounce = this.mode === PlayMode.Bounce;
             if (this._multiAnimationSettings.length > 0 && this._multiAnimationSettings[this._currentAnimation]?.mode) {
                 this._isBounce = this._multiAnimationSettings[this._currentAnimation]?.mode === PlayMode.Bounce;
@@ -1046,6 +988,10 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             this._lottieInstance.setSpeed(speed);
             this._lottieInstance.setDirection(direction);
             this._lottieInstance.setSubframe(Boolean(this.subframe));
+            // Set progress on load if AnimateOnScroll
+            if (this.animateOnScroll) {
+                this._applyScrollProgress();
+            }
             // Start playing if autoplay is enabled
             if ((this.autoplay || this.animateOnScroll || this.playOnVisible) && this.direction === -1) {
                 this.seek('99%');
@@ -1156,7 +1102,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             return;
         }
         // Extract frame number from either number or percentage value
-        const matches = value.toString().match(/^(\d+)(%?)$/);
+        const matches = RegExp(/^(\d+)(%?)$/).exec(value.toString());
         if (!matches) {
             return;
         }
@@ -1345,9 +1291,12 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     /**
    * Handle blur.
    */ _handleBlur() {
-        setTimeout(()=>{
+        const blurTimeout = setTimeout(()=>{
             this._toggleSettings(false);
         }, 200);
+        if (!this._isSettingsOpen) {
+            clearTimeout(blurTimeout);
+        }
     }
     /**
    * Handle click.
@@ -1404,54 +1353,65 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     /**
    * Add IntersectionObserver.
    */ _addIntersectionObserver() {
-        if (!this._container || this._intersectionObserver) {
+        if (!this._container || this._intersectionObserver || !hasIOSupport) {
             return;
         }
-        if (!('IntersectionObserver' in window)) {
-            this._intersectionObserverFallback();
-            removeEventListener('scroll', this._intersectionObserverFallback, true);
-            addEventListener('scroll', this._intersectionObserverFallback, {
-                capture: true,
-                passive: true
-            });
-            return;
-        }
-        this._intersectionObserver = new IntersectionObserver((entries)=>{
-            const { length } = entries;
-            for(let i = 0; i < length; i++){
-                if (!entries[i]?.isIntersecting || document.hidden) {
-                    if (this.playerState === PlayerState.Playing) {
-                        this._freeze();
-                    }
-                    this._playerState.visible = false;
-                    continue;
-                }
-                if (!this.animateOnScroll && !this.playOnVisible && this.playerState === PlayerState.Frozen) {
-                    this.play();
-                }
-                if (this.playOnVisible) {
-                    if (this.playerState === PlayerState.Completed && !this.once) {
-                        this.playerState = PlayerState.Playing;
-                        this._lottieInstance?.goToAndPlay(this.direction === 1 ? 0 : this._lottieInstance.totalFrames);
-                    } else {
-                        setTimeout(()=>{
-                            this.play();
-                        }, this.delay);
-                    }
+        this._intersectionObserver = new IntersectionObserver(([{ isIntersecting }])=>{
+            this._isIntersecting = isIntersecting;
+            // Prevent animate on scroll for users with who prefers reduces motion.
+            if (this.animateOnScroll && !hasReducedMotion) {
+                if (isIntersecting) {
+                    this._startScrollLoop();
+                } else {
+                    this._stopScrollLoop();
                 }
-                /**
-         * If the player is a ways down the page, we need to account for this by
-         * setting _playerState.scrollY to the current scroll position. However, we
-         * also need to check that the player hasn't been scrolled past, so we check
-         * boundingClientRect as well.
-         */ if (!this._playerState.scrollY && (entries[i]?.boundingClientRect.y || 0) > 0) {
-                    this._playerState.scrollY = scrollY;
+                return;
+            }
+            if (!isIntersecting || document.hidden) {
+                if (this.playerState === PlayerState.Playing) {
+                    this._freeze();
                 }
-                this._playerState.visible = true;
+                return;
+            }
+            if (!this.playOnVisible && this.playerState === PlayerState.Frozen) {
+                this.play();
+            }
+            if (!this.playOnVisible || hasReducedMotion) {
+                return;
+            }
+            if (this.playerState === PlayerState.Completed && !this.once) {
+                this.playerState = PlayerState.Playing;
+                this._lottieInstance?.goToAndPlay(this.direction === 1 ? 0 : this._lottieInstance.totalFrames);
+                return;
+            }
+            this._playerState.playTimeout = setTimeout(()=>{
+                this.play();
+            }, this.delay);
+            if (this.playerState === PlayerState.Playing) {
+                clearTimeout(this._playerState.playTimeout);
             }
         });
         this._intersectionObserver.observe(this._container);
     }
+    _applyScrollProgress() {
+        if (!this.animateOnScroll || !this._lottieInstance) {
+            return;
+        }
+        const progress = this._getScrollProgress();
+        if (progress === null) {
+            return;
+        }
+        const { totalFrames } = this._lottieInstance, frame = progress * (totalFrames - 1), epsilon = this.subframe ? 0.1 : 0.5;
+        if (Math.abs(frame - this._playerState.frame) < epsilon) {
+            return;
+        }
+        this._playerState.frame = frame;
+        this._lottieInstance.goToAndStop(frame, true);
+    }
+    _cancelScrollProbe() {
+        this._scrollProbe?.cancel();
+        this._scrollProbe = undefined;
+    }
     _clearPrevious() {
         this._lottieInstance?.destroy();
         const figure = this.shadow?.querySelector('.animation');
@@ -1530,7 +1490,8 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         if (currentAnimationSettings?.autoplay !== undefined) {
             hasAutoplay = Boolean(currentAnimationSettings.autoplay);
         }
-        if (this.animateOnScroll) {
+        // Disable autoplay on reduced-motion.
+        if (this.animateOnScroll || hasReducedMotion) {
             hasAutoplay = false;
         }
         // Segment
@@ -1553,6 +1514,30 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             rendererType: this.renderer
         });
     }
+    _getScrollProgress() {
+        if (!this._container) {
+            return null;
+        }
+        if (hasVTSupport) {
+            this._scrollProbe ??= this._container.animate({
+                '--dotlottie-scroll': [
+                    0,
+                    1
+                ]
+            }, {
+                fill: 'both',
+                rangeEnd: 'cover 100%',
+                rangeStart: 'cover 0%',
+                timeline: new ViewTimeline({
+                    axis: 'block',
+                    subject: this._container
+                })
+            });
+            return this._scrollProbe.effect?.getComputedTiming().progress ?? null;
+        }
+        const { height, top } = this._container.getBoundingClientRect(), viewport = visualViewport?.height ?? innerHeight;
+        return clamp((viewport - top) / (viewport + height), 0, 1);
+    }
     async _handleError(error) {
         this.playerState = PlayerState.Error;
         if (!this.quiet) {
@@ -1562,44 +1547,37 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         this.dispatchEvent(new CustomEvent(PlayerEvent.Error));
         console.error(error);
     }
-    /**
-   * Handle scroll.
-   */ _handleScroll() {
-        if (!this.animateOnScroll || !this._DOMRect || !this._lottieInstance) {
+    _handleLdScript() {
+        const ldScript = this.parentElement?.querySelector('script[type="application/ld+json"]');
+        if (!ldScript) {
             return;
         }
-        if (isServer) {
-            console.warn('DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.');
-            return;
+        const settings = JSON.parse(ldScript.innerHTML);
+        if (settings.selector) {
+            this.selector = settings.selector;
+        }
+        if (settings.segment) {
+            this.setSegment(settings.segment);
+        }
+        if (settings.multiAnimationSettings) {
+            this.setMultiAnimationSettings(settings.multiAnimationSettings);
         }
-        if (!this._playerState.visible) {
+    }
+    _handleSelector(method) {
+        if (!this.selector) {
             return;
         }
-        if (this._playerState.scrollTimeout) {
-            clearTimeout(this._playerState.scrollTimeout);
-        }
-        this._playerState.scrollTimeout = setTimeout(()=>{
-            this.playerState = PlayerState.Paused;
-        }, 400);
-        const { totalFrames } = this._lottieInstance;
-        let scrollPosition = scrollY - this._playerState.scrollY;
-        if (scrollY <= this._playerState.scrollY) {
-            scrollPosition = this._playerState.scrollY - scrollY;
-        }
-        const { bottom, height, top } = this._DOMRect;
-        let offset = height - bottom;
-        if (top >= innerHeight) {
-            offset = height;
-        }
-        const scrollProgress = scrollPosition / (innerHeight + offset), currentFrame = clamp(scrollProgress * (totalFrames - 1), 0, totalFrames);
-        requestAnimationFrame(()=>{
-            if (currentFrame >= totalFrames) {
-                this.playerState = PlayerState.Paused;
-                return;
+        const selector = document.getElementById(this.selector);
+        if (selector) {
+            if (this.hover) {
+                selector[method]('mouseenter', this._mouseEnter);
+                selector[method]('mouseleave', this._mouseLeave);
+            } else {
+                selector[method]('click', this._handleClick);
             }
-            this.playerState = PlayerState.Playing;
-            this._lottieInstance?.goToAndStop(currentFrame, true);
-        });
+        } else {
+            this.selector = null;
+        }
     }
     _handleWindowBlur({ type }) {
         if (this.dontFreezeOnBlur) {
@@ -1612,20 +1590,6 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             this.play();
         }
     }
-    _intersectionObserverFallback() {
-        if (!this._container) {
-            return;
-        }
-        const { bottom, left, right, top } = this._container.getBoundingClientRect();
-        this._playerState.visible = top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
-        if (this.autoplay || this.playOnVisible || this.playerState === PlayerState.Playing || this.playerState === PlayerState.Frozen) {
-            if (this._playerState.visible) {
-                this.play();
-            } else {
-                this._freeze();
-            }
-        }
-    }
     _loopComplete() {
         if (!this._lottieInstance) {
             return;
@@ -1665,7 +1629,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     /**
    * Handle MouseEnter.
    */ _mouseEnter() {
-        if (!this.hover || !this._lottieInstance || isTouch()) {
+        if (!this.hover || !this._lottieInstance || isTouch() || hasReducedMotion) {
             return;
         }
         if (this.mouseout === MouseOut.Reverse) {
@@ -1683,7 +1647,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     /**
    * Handle MouseLeave.
    */ _mouseLeave() {
-        if (!this.hover || !this._lottieInstance || isTouch()) {
+        if (!this.hover || !this._lottieInstance || isTouch() || hasReducedMotion) {
             return;
         }
         switch(this.mouseout){
@@ -1698,10 +1662,6 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
                 }
             case MouseOut.Reverse:
                 {
-                    // const { direction = 1 } =
-                    //   this._multiAnimationSettings.length > 0 ?
-                    //     this._multiAnimationSettings[this._currentAnimation + 1] ?? { direction: 1 } : this,
-                    //   newDirection = direction * -1 as AnimationDirection
                     this._lottieInstance.setDirection(-1);
                     this.play();
                     break;
@@ -1728,6 +1688,25 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
    */ _removeEventListeners() {
         this._toggleEventListeners('remove');
     }
+    _scrollLoop() {
+        this._playerState.scrollLoopId = requestAnimationFrame(this._scrollLoop);
+        this._applyScrollProgress();
+    }
+    _startScrollLoop() {
+        if (isServer) {
+            console.warn('DotLottie: Scroll animations will not work in a Server Side Rendering context. Try to wrap this in a client component.');
+            return;
+        }
+        this._playerState.scrollLoopId ??= requestAnimationFrame(this._scrollLoop);
+    }
+    _stopScrollLoop() {
+        if (this._playerState.scrollLoopId === undefined) {
+            return;
+        }
+        cancelAnimationFrame(this._playerState.scrollLoopId);
+        this._playerState.scrollLoopId = undefined;
+        this._applyScrollProgress();
+    }
     _switchInstance(isPrevious = false) {
         // Bail early if there is not animation to play
         if (!this._animations[this._currentAnimation]) {
@@ -1735,9 +1714,8 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         }
         try {
             // Clear previous animation
-            if (this._lottieInstance) {
-                this._lottieInstance.destroy();
-            }
+            this._lottieInstance?.destroy();
+            this._cancelScrollProbe();
             // Re-initialize lottie player
             this._lottieInstance = this.loadAnimation({
                 ...this._getOptions(),
@@ -1753,7 +1731,8 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             this.dispatchEvent(new CustomEvent(isPrevious ? PlayerEvent.Previous : PlayerEvent.Next));
             if (this._multiAnimationSettings[this._currentAnimation]?.autoplay ?? this.autoplay) {
                 if (this.animateOnScroll) {
-                    this._lottieInstance.goToAndStop(0, true);
+                    // Get instant scroll position
+                    this._applyScrollProgress();
                     this.playerState = PlayerState.Paused;
                     return;
                 }
@@ -1781,19 +1760,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             this._lottieInstance[method](PlayerEvent.DataReady, this._dataReady);
             this._lottieInstance[method](PlayerEvent.DataFailed, this._dataFailed);
         }
-        if (this.selector) {
-            const selector = document.getElementById(this.selector);
-            if (selector) {
-                if (this.hover) {
-                    selector[method]('mouseenter', this._mouseEnter);
-                    selector[method]('mouseleave', this._mouseLeave);
-                } else {
-                    selector[method]('click', this._handleClick);
-                }
-            } else {
-                this.selector = null;
-            }
-        }
+        this._handleSelector(method);
         if (this._container && !this.selector) {
             if (this.hover) {
                 this._container[method]('mouseenter', this._mouseEnter);
@@ -1811,12 +1778,6 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             capture: false,
             passive: true
         });
-        if (this.animateOnScroll) {
-            window[method]('scroll', this._handleScroll, {
-                capture: true,
-                passive: true
-            });
-        }
     }
     /**
    * Toggle show Settings.