Community forum for knowledge and support

Home
Members
Nicolò Gori
N
Nicolò Gori
Offline, last seen 3 months ago
Joined November 6, 2024

Hello guys, I'm looking for some advices on how to manage lagging animations inside a webflow project. Here is a 2 min video where I show the issue: https://www.loom.com/share/472afd47bd514f7a84c6d78af8c948cb?sid=204ad2ea-4f7c-4593-a84c-6543ebed555b

Thanks to anyone that can give us some insights on how to manage this kind of problems.

2 comments
M

https://www.loom.com/share/5325e742a934466c8330b7953428efc3


Hi guys anyone that can help with this? Sorry if it's not clear.. Here's the custom code:
<style><br />.line {<br /> position: relative;<br />}<br />.line-mask {<br /> position: absolute;<br /> top: 0;<br /> right: 0;<br /> background-color: White;<br /> opacity: 0.65;<br /> height: 100%;<br /> width: 100%;<br /> z-index: 2;<br />}<br /></style>

<script>https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js</a>"></script>
<script>https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js</a>"></script>
<script>https://unpkg.com/split-type</a>"></script>
<script><br />let typeSplit;<br />// Split the text up<br />function runSplit() {<br /> typeSplit = new SplitType(".split-lines", {<br /> types: "lines, words"<br /> });<br /> $(".line").append("<div class='line-mask'></div>");<br /> createAnimation();<br />}<br />runSplit();<br />// Update on window resize<br />let windowWidth = $(window).innerWidth();<br />window.addEventListener("resize", function () {<br /> if (windowWidth !== $(window).innerWidth()) {<br /> windowWidth = $(window).innerWidth();<br /> typeSplit.revert();<br /> runSplit();<br /> }<br />});<br /><br />gsap.registerPlugin(ScrollTrigger);<br /><br />function createAnimation() {<br /> $(".line").each(function (index) {<br /> let tl = gsap.timeline({<br /> scrollTrigger: {<br /> trigger: $(this),<br /> // trigger element - viewport<br /> start: "top center",<br /> end: "bottom center",<br /> scrub: 1<br /> }<br /> });<br /> <a target="_blank" rel="noopener noreferrer" href="http://tl.to">tl.to</a>($(this).find(".line-mask"), {<br /> width: "0%",<br /> duration: 1<br /> });<br /> });<br />}<br /></script>


This is the resource:
https://www.youtube.com/watch?v=yvqSioowCRc

9 comments
M
N