Difference between revisions of "Team:Vilnius-Lithuania/test/index.html"

Line 57: Line 57:
 
const ScrollLottie = (obj) => {
 
const ScrollLottie = (obj) => {
  
−
let anim = lottie.loadAnimation({
+
let anim = lottie.loadAnimation({
−
container: document.querySelector(obj.target),
+
container: document.querySelector(obj.target),
−
renderer: 'svg',
+
renderer: 'svg',
−
loop: false,
+
loop: false,
−
autoplay: false,
+
autoplay: false,
−
path: obj.path
+
path: obj.path,
−
});
+
assetsPath: obj.assetsPath
 +
});
  
−
let timeObj = {
+
let timeObj = {
−
currentFrame: 0
+
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)
+
 
}
 
}
 +
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://2020.igem.org/Template:Vilnius-Lithuania/js/fishAnimation.json'
+
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


flavoflow