├── LICENSE
├── .github
    └── workflows
    │   └── main.yml
├── README.md
└── src
    ├── lottieLazyLoading.min.js
    └── lottieLazyLoading.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Athlon Studio
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: Minify Plugin
 2 | permissions:
 3 |   contents: write
 4 |   pages: write 
 5 | on:
 6 |   push:
 7 |     branches:
 8 |     - main
 9 |     
10 | jobs:
11 |   minify:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |     - uses: actions/checkout@v2
15 |     - name: Auto Minify
16 |       uses: nizarmah/auto-minify@v2.1
17 |     - name: Auto committing minified files
18 |       uses: stefanzweifel/git-auto-commit-action@v4
19 |       with:
20 |         commit_message: "Github Action: Auto Minified JS and CSS files"
21 |         branch: ${{ github.ref }}
22 |     
23 |   purge:
24 |     runs-on: ubuntu-latest
25 |     steps:
26 |     - name: Purge JSdeliver
27 |       continue-on-error: true
28 |       uses: gacts/purge-jsdelivr-cache@v1
29 |       with: 
30 |         url: |
31 |           https://cdn.jsdelivr.net/gh/athlonstudio/webflow-lottie-lazy-loader@latest/src/lottieLazyLoading.js
32 |           https://cdn.jsdelivr.net/gh/athlonstudio/webflow-lottie-lazy-loader@latest/src/lottieLazyLoading.min.js
33 |           https://cdn.jsdelivr.net/gh/athlonstudio/webflow-lottie-lazy-loader@${{ github.ref_name }}/src/lottieLazyLoading.min.js
34 | 
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Primary logo](https://github.com/user-attachments/assets/cb0e2d8a-90f4-4bb0-a813-31e578aaf68f)
 2 | 
 3 | # Webflow Lottie Lazy Loader
 4 | A js package that when put into a webflow website will enable lazy loading of Lottie animations. This will also pause any off-screen Lottie animations to further improve performance.
 5 | 
 6 | ## Usage
 7 | Paste the script into the **Footer code** of your Webflow page and apply a `data-loading: lazy` attribute to all the lottie elements you want lazy loaded.
 8 | 
 9 | ```html
10 | <script src='https://cdn.jsdelivr.net/gh/athlonstudio/lottie-lazy-loader@latest/src/lottieLazyLoading.min.js'></script>
11 | ```
12 | 
13 | ## Attributes
14 | - `data-loading="lazy"` - Enables lazy loading on that Lottie element.
15 | - `data-play-once="true"` - Makes it so that the Lottie element only plays one time and remains static after that first play.
16 | - `data-poster="[image-URL]"` - Generates a placeholder image that loads with the page, and persists until you scroll and the Lottie element lazy loads in. This attribute may affect performance if you use large or there are too many lotties on your page. Small SVGs or WEBP reccomended.
17 | - `data-will-transform="true"` - Flags an element that is inside of a carousel or other transforming parent so that it can be rendered properly and play correctly. (May affect loading and performance)
18 | 
19 | ## Example 
20 | ### Footer Code section with the Lottie Lazy Loader script.
21 | ![An image of the Footer Code section with the Lottie Lazy Loader script.](https://github.com/athlonstudio/webflow-lottie-lazy-loader/assets/162381441/3d41b60b-3f74-4c88-8934-1652417cb3ee)
22 | 
23 | ### Webflow Lottie Panel with the loading and poster attributes added.
24 | ![An image of the Webflow Lottie Panel with the loading and poster attributes added.](https://github.com/athlonstudio/webflow-lottie-lazy-loader/assets/162381441/b383f49c-f136-4f62-b076-e1055541c58b)
25 | 


--------------------------------------------------------------------------------
/src/lottieLazyLoading.min.js:
--------------------------------------------------------------------------------
1 | const lazyLotties=[...document.querySelectorAll("[data-loading=\"lazy\"]")],checkLoaded=a=>!!(a.children.length&&("svg"===a.children[0].tagName.toLowerCase()||"canvas"===a.children[0].tagName.toLowerCase()));if(!!lazyLotties.length){function a(a,b){const c=a.target;a.isIntersecting?(c.dataset.loop=c.dataset.defaultLoop,c.dataset.autoplay=c.dataset.defaultAutoplay,c.dataset.duration=c.dataset.defaultDuration,c.dataset.state="playing",Webflow.require("lottie").createInstance(c),"true"===c.dataset.playOnce&&b.unobserve(c)):(c.dataset.duration=.01,c.dataset.loop=0,c.dataset.state="paused",Webflow.require("lottie").createInstance(c))}function b(b,c,d){const e=b.target;b.isIntersecting&&!checkLoaded(e)&&"none"!==e.style.display&&(e.dataset.animationType="lottie",e.dataset.src=e.dataset.defaultSrc,Webflow.require("lottie").createInstance(e),e.dataset.willTransform&&(e.style.position="relative"),e.querySelector("img")&&e.querySelector("img").remove(),!(0>b.boundingClientRect.bottom||0<=b.boundingClientRect.top-Math.max(document.documentElement.clientHeight,window.innerHeight))&&a(b,d),c.unobserve(e))}function c(a){a.dataset.defaultSrc=a.dataset.src,a.dataset.defaultLoop=a.dataset.loop,a.dataset.defaultAutoplay=a.dataset.autoplay,a.dataset.state="paused",a.dataset.src="",a.dataset.loop=0,a.dataset.animationType="lazy-lottie",a.dataset.duration=.01,a.dataset.autoplay=0,a.style.overflow="hidden",a.dataset.poster&&("absolute"!==a.style.position&&(a.style.position="relative"),a.appendChild(Object.assign(document.createElement("img"),{src:a.dataset.poster,loading:"eager",ariaHidden:"true",style:"position:absolute;left:50%;transform:translate(-50%,-50%);"}))),a.dataset.willTransform&&(a.style.left="0px",a.style.top="0px",a.style.position="absolute")}lazyLotties.forEach(a=>c(a));const d=new IntersectionObserver(b=>b.forEach(b=>{const c=b.target;"none"!==c.style.display&&checkLoaded(c)&&a(b,d)}),{root:null,rootMargin:"0px"}),e=new IntersectionObserver(a=>a.forEach(a=>b(a,e,d)),{root:null,rootMargin:"1250px"});lazyLotties.forEach(a=>e.observe(a)),lazyLotties.forEach(a=>d.observe(a))}


--------------------------------------------------------------------------------
/src/lottieLazyLoading.js:
--------------------------------------------------------------------------------
 1 | const lazyLotties = [...document.querySelectorAll('[data-loading="lazy"]')];
 2 | const checkLoaded = (lottieEl) => !!(lottieEl.children.length && (lottieEl.children[0].tagName.toLowerCase() === 'svg' || lottieEl.children[0].tagName.toLowerCase() === 'canvas'));
 3 |   
 4 | if (!!lazyLotties.length) {
 5 |   function handlePlayLottie (entry, observer) {
 6 |     const lottieEl = entry.target;
 7 |       if (entry.isIntersecting) {
 8 |         lottieEl.dataset.loop = lottieEl.dataset.defaultLoop;
 9 |         lottieEl.dataset.autoplay = lottieEl.dataset.defaultAutoplay;
10 |         lottieEl.dataset.duration = lottieEl.dataset.defaultDuration;
11 |         lottieEl.dataset.state = 'playing';
12 |         Webflow.require('lottie').createInstance(lottieEl);
13 | 
14 |         if (lottieEl.dataset.playOnce === 'true') {
15 |           observer.unobserve(lottieEl);
16 |         } 
17 |       } else {
18 |         lottieEl.dataset.duration = 0.01
19 |         lottieEl.dataset.loop = 0;
20 |         lottieEl.dataset.state = 'paused';
21 |         Webflow.require('lottie').createInstance(lottieEl); 
22 |       }
23 |     }
24 |   
25 |   function handleLottieLoad(entry, observer, playObserver) {
26 |       const lottieEl = entry.target;
27 |  
28 |       if (entry.isIntersecting && !checkLoaded(lottieEl) && lottieEl.style.display !== 'none') {  
29 |         lottieEl.dataset.animationType = 'lottie';
30 |         lottieEl.dataset.src = lottieEl.dataset.defaultSrc; 
31 |         Webflow.require('lottie').createInstance(lottieEl);
32 |         
33 |         if(lottieEl.dataset.willTransform) {
34 |             lottieEl.style.position = 'relative';
35 |         }
36 |         
37 |         lottieEl.querySelector('img') && lottieEl.querySelector('img').remove();
38 |         
39 |         if (!(entry.boundingClientRect.bottom < 0 || entry.boundingClientRect.top - Math.max(document.documentElement.clientHeight, window.innerHeight) >= 0)) {
40 | 			handlePlayLottie(entry, playObserver)        
41 |         }
42 |         observer.unobserve(lottieEl);
43 |         } 
44 |     }
45 |   
46 |   function prepareLotties(lazyLottie) {
47 |     lazyLottie.dataset.defaultSrc = lazyLottie.dataset.src;
48 |     lazyLottie.dataset.defaultLoop = lazyLottie.dataset.loop;
49 |     lazyLottie.dataset.defaultAutoplay = lazyLottie.dataset.autoplay;
50 |     lazyLottie.dataset.state = 'paused';
51 |     lazyLottie.dataset.src = '';
52 |     lazyLottie.dataset.loop = 0;
53 |     lazyLottie.dataset.animationType = 'lazy-lottie';
54 |     lazyLottie.dataset.duration = 0.01;
55 |     lazyLottie.dataset.autoplay = 0;
56 |     lazyLottie.style.overflow = 'hidden';
57 |     
58 |     if(lazyLottie.dataset.poster) {
59 |       lazyLottie.style.position !== 'absolute' && (lazyLottie.style.position = 'relative');
60 |       lazyLottie.appendChild(Object.assign(document.createElement('img'), {
61 | 		src:lazyLottie.dataset.poster, 
62 | 		loading: 'eager',
63 | 	      	ariaHidden: 'true',
64 | 		style:'position:absolute;left:50%;transform:translate(-50%,-50%);',
65 | 	  }));
66 |   	}
67 | 
68 |     if(lazyLottie.dataset.willTransform) {
69 |       lazyLottie.style.left = '0px';
70 |       lazyLottie.style.top = '0px';
71 |       lazyLottie.style.position = 'absolute';
72 | 	}
73 |   }
74 | 
75 |   lazyLotties.forEach((lazyLottie) => prepareLotties(lazyLottie));
76 |     const lazyLottiePlayer = new IntersectionObserver((entries) => entries.forEach((entry) => {
77 | 		const lottieEl = entry.target;
78 | 		
79 | 		if(lottieEl.style.display !== 'none' && checkLoaded(lottieEl)) {
80 | 		 	handlePlayLottie(entry, lazyLottiePlayer);
81 | 		}
82 |     }), { root: null, rootMargin: '0px'  });
83 |   
84 |     const lazyLottieLoader = new IntersectionObserver((entries) => entries.forEach((entry) => handleLottieLoad(entry, lazyLottieLoader, lazyLottiePlayer)), { root: null, rootMargin: '1250px' });
85 |   
86 |     lazyLotties.forEach((lottieElement) => lazyLottieLoader.observe(lottieElement));
87 |     lazyLotties.forEach((lottieElement) => lazyLottiePlayer.observe(lottieElement));
88 | }
89 | 


--------------------------------------------------------------------------------