├── README.md
└── ScrollLottie.js


/README.md:
--------------------------------------------------------------------------------
 1 | # ScrollLottie
 2 | Use GSAP ScrollTrigger to scroll through a Lottie animation with your mouse or scrollbar
 3 | 
 4 | ## Dependencies (you will need to run these yourself for it to work)
 5 | - Greensock GSAP 3.x
 6 | https://cdnjs.com/libraries/gsap
 7 | 
 8 | - Greensock ScrollTrigger 
 9 | https://greensock.com/scrolltrigger
10 | 
11 | - Lottie player
12 | https://cdnjs.com/libraries/bodymovin
13 | 
14 | 
15 | ### Codepen demo
16 | https://codepen.io/chrisgannon/pen/7e302171605cbc4274ce44733189ffe9 
17 | 
18 | ### Useage
19 |     //ScrollLottie (target: String, jsonPath: String, easeDuration: Number, speed: String "fast" | "medium" | "slow")
20 | 
21 |     ScrollLottie({
22 |      target: '#animationWindow',
23 |      path: 'https://assets.codepen.io/35984/NASA_Worm_logo_scrollTrigger.json', 
24 |      duration: 4, 
25 |      speed: 'slow'
26 |     })
27 | 
28 | 


--------------------------------------------------------------------------------
/ScrollLottie.js:
--------------------------------------------------------------------------------
 1 | const ScrollLottie = (obj) => {
 2 | 
 3 |   let anim = lottie.loadAnimation({
 4 |    container: document.querySelector(obj.target), 
 5 |    renderer: 'svg',
 6 |    loop: false,
 7 |    autoplay: false,
 8 |    path: obj.path 
 9 |  });
10 |  
11 |  let timeObj = {currentFrame: 0}
12 |  let endString = (obj.speed === "slow") ? "+=2000" : (obj.speed === "medium") ? "+=1000" : (obj.speed === undefined) ? "+=1250" : "+=500";
13 |  ScrollTrigger.create({
14 |    trigger: obj.target,
15 |      scrub: true,
16 |      pin: true,
17 |      start: "top top",
18 |      end: endString, 
19 |      onUpdate: self => {
20 |       if(obj.duration) {
21 |        gsap.to(timeObj, {
22 |         duration: obj.duration,
23 |         currentFrame:(Math.floor(self.progress *  (anim.totalFrames - 1))),
24 |         onUpdate: () => {
25 |          anim.goToAndStop(timeObj.currentFrame, true)
26 |         },
27 |         ease: 'expo'
28 |        })
29 |       } else {
30 |         anim.goToAndStop(self.progress *  (anim.totalFrames - 1), true)
31 |       }
32 |      }
33 |  });  
34 | 
35 | }
36 | 


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