Line 57: | Line 57: | ||
const ScrollLottie = (obj) => { | const ScrollLottie = (obj) => { | ||
− | + | let anim = lottie.loadAnimation({ | |
− | + | container: document.querySelector(obj.target), | |
− | + | renderer: 'svg', | |
− | + | loop: false, | |
− | + | autoplay: false, | |
− | + | path: obj.path, | |
− | + | assetsPath: obj.assetsPath | |
+ | }); | ||
− | + | let timeObj = { | |
− | + | currentFrame: 0 | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | let endString = (obj.speed === "slow") ? "+=2000" : (obj.speed === "medium") ? "+=1000" : (obj.speed === undefined) ? "+=1250" : "+=500"; | ||
+ | ScrollTrigger.create({ | ||
+ | trigger: obj.target, | ||
+ | scrub: true, | ||
+ | pin: true, | ||
+ | start: "top top", | ||
+ | end: endString, | ||
+ | onUpdate: self => { | ||
+ | if (obj.duration) { | ||
+ | gsap.to(timeObj, { | ||
+ | duration: obj.duration, | ||
+ | currentFrame: (Math.floor(self.progress * (anim.totalFrames - 1))), | ||
+ | onUpdate: () => { | ||
+ | anim.goToAndStop(timeObj.currentFrame, true) | ||
+ | }, | ||
+ | ease: 'expo' | ||
+ | }) | ||
+ | } else { | ||
+ | anim.goToAndStop(self.progress * (anim.totalFrames - 1), true) | ||
+ | } | ||
+ | } | ||
+ | }); | ||
} | } | ||
− | + | ||
− | + | ||
ScrollLottie({ | ScrollLottie({ | ||
target: '#animation', | target: '#animation', | ||
− | path: 'https:// | + | path: 'js/bandymas1.json', |
+ | assetsPath: 'https://static.igem.org/mediawiki/2020/' | ||
}) | }) | ||
− | |||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
{{Vilnius-Lithuania/footer}} | {{Vilnius-Lithuania/footer}} |
Revision as of 14:57, 3 September 2020