Search the Community
Showing results for tags 'cleanup'.
Found 3 results
-
Hi, I have created this page transition in my next.js app router, Now it works perfectly fine, However if i click on a link in navigation while the animation is running, it breaks the styling of pages, I found .revert() which will work , but instant reset of styling will lead to bad user experience, so what is before the new page animation to play is to wait for all the other animations to finish before starting, my page transition is exactly like this website:https://hagisbarbershop.de/, it just breaks if I change pages mid animation or too fast. page.jsx
-
I am struggling to play video by scrolling the page. I have two main issues: 1. How can I properly cleanup animation?! (I need to scroll to top back when i refresh the page) 2. How can I start playing video when it reaches to the top of window while keeping current position until video finishes. Once it's done, I continue to scroll to bottom. Here is my minimal video. https://stackblitz.com/edit/nuxt-starter-sv6wqk?file=app.vue thanks for the help in advance)
-
Hi all! I am running in a problem with this animation (Stackbliz), an infinite looping horizontal section with a snapping functionality (which is causing the problem). The animation looks working properly, but as soon as I change page (by clicking in one of the images) I run into a scroll issue. When I am in the new page, if I scroll for a bit and then stop scrolling, the page get scrolled to the top. The issue is inside this part of code. Looks like this function is running even when the component is not rendered anymore: ScrollTrigger.refresh() ScrollTrigger.addEventListener("scrollEnd", () => scrollToOffset(scrub.vars.offset)); function scrollToOffset(offset) { let snappedTime = snapTime(offset), progress = (snappedTime - seamlessLoop.duration() * iteration) / seamlessLoop.duration(), scroll = progressToScroll(progress); if (progress >= 1 || progress < 0) { return wrap(Math.floor(progress), scroll); } trigger.scroll(scroll); } Can be that gsap.context is not able to cleanup properly this part of code? I am cleaning up like this: return () => { ctx.revert(); ScrollTrigger.getAll().forEach(t => t.kill()); } Thanks in advance!
