Line 46: | Line 46: | ||
</div> | </div> | ||
</section> | </section> | ||
− | < | + | <main id="storytelling"> |
− | + | <div id="animation"></div> | |
− | + | </main> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/particles.js&action=raw&ctype=text/javascript"></script> | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/particles.js&action=raw&ctype=text/javascript"></script> | ||
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/intro.js&action=raw&ctype=text/javascript"></script> | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/intro.js&action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/gsap.min.js&action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/ScrollTrigger.min.js&action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/lottie.js&action=raw&ctype=text/javascript"></script> | ||
+ | <script> | ||
+ | const ScrollLottie = (obj) => { | ||
+ | |||
+ | let anim = lottie.loadAnimation({ | ||
+ | container: document.querySelector(obj.target), | ||
+ | renderer: 'svg', | ||
+ | loop: false, | ||
+ | autoplay: false, | ||
+ | path: obj.path | ||
+ | }); | ||
+ | |||
+ | 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) | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
{{Vilnius-Lithuania/footer}} | {{Vilnius-Lithuania/footer}} |
Revision as of 14:01, 3 September 2020