sammekekko

Hello! Thanks for giving me some options to try! I forked the latest version of Nuxt 3 as you said, but got the same error as before (only in safari). I also tried codesandbox, but it wont even start out of the box, there seems to be an issue on their side.

I added a minimal demo, but stackblitz fails to install the dependencies on safari unfortunately.. It works fine on firefox for me.

Hello, I have encountered a frustrating problem where my navigation page opened by the menu button, is not smoothly animated on safari. I added a will-change: transform for the divs that were animated with transform. This did not help my issue. Example of this can be seen live on the website on mobile sizes: press on the menu text in the navbar (I am far from done with the website overall). .navigation-page-navbar, .bottom-container and .navigation-page all have will-change: transform; Here is the animation in JS: let menuTimeline = $gsap.timeline({ paused: true }); menuTimeline .set("html, body", { overflowY: "hidden", }) .set(".navigation-page-navbar", { xPercent: 50, }) .set(".bottom-container", { xPercent: 50, }) .to(".navigation-page", { xPercent: -100, duration: 0.8, ease: "power4.inOut", }) .to(".navigation-page-navbar", { xPercent: 0, duration: 0.5, delay: -0.55, ease: "power4.inOut", }) .to(".bottom-container", { xPercent: 0, duration: 0.65, delay: -0.6, ease: "power4.inOut", }) .to("html", 0.4, { "--nav-hamburger-width": "100%", ease: "Power2.easeInOut", delay: -0.7, }); stackblitz demo: https://stackblitz.com/edit/nuxt-starter-dyou9c?file=components%2FHeader.vue Thanks ahead for trying to help me!

https://codepen.io/sammekekko/pen/BaMmoeG (Scroll down for the text) This will recreate my issue, where if I on a smaller resolution run the script, the header will get split into two lines (therefore two divs). When I then rescale to a full screen size, the two divs are still there. I could not manage to get an update function in the codepen, because I am using nuxt and the rep i was looking for did not have splittext and scrolltrigger.. I think what I am missing is a proper debounce!

Hello! I have recently encountered a problem where I am trying to revert the parent divs after a browser resize, but it is not reverting at all! I am trying to revert the "paragraph-" and "headerParentSplit" before the animation starts (as long as it has been set before) I have tried debugging by console logging this if statement, and it does go through, although it still does no difference. First picture with only one header line, is how it should look like. This is what happens when you enter the website with a fullscreen resolution. The other picture with a red and black background for the header, is how it looks like. The reason behind this is that the div is split into lines when the resolution was smaller (therfore it is two divs). It does not revert with the following code.. function setupSplits() { const paragraph = document.querySelectorAll("p"); const header = document.querySelectorAll("h1, h2"); if (headerParentSplit != null) { headerParentSplit.revert(); paragraphParentSplit.revert(); } var headerParentSplit = new $SplitText(header, { // type: "words", linesClass: "split-parent", }); var paragraphParentSplit = new $SplitText(paragraph, { // type: "words", linesClass: "split-parent", }); header.forEach((header) => { // Reset if needed if (header.anim) { header.anim.progress(1).kill(); header.split.revert(); } header.split = new $SplitText(header, { type: "lines,words", linesClass: "split-line", }); // Set up the anim $gsap.set("h1, h2", { visibility: "visible", }); header.anim = $gsap.from(header.split.words, { scrollTrigger: { trigger: header, toggleActions: "restart pause resume reverse", start: "top 95%", }, duration: 0.7, ease: "circ.easeOut", yPercent: 100, opacity: 0, stagger: 0.015, }); }); paragraph.forEach((paragraph) => { // Reset if needed if (paragraph.anim) { paragraph.anim.progress(1).kill(); paragraph.split.revert(); } paragraph.split = new $SplitText(paragraph, { type: "lines,words,chars", linesClass: "split-line", }); $gsap.set("p", { visibility: "visible", }); paragraph.anim = $gsap.from(paragraph.split.words, { scrollTrigger: { trigger: paragraph, toggleActions: "restart pause resume reverse", start: "top 95%", }, duration: 0.6, ease: "circ.easeOut", yPercent: 100, opacity: 0, stagger: 0.005, }); }); } onMounted(() => { setupSplits(); $ScrollTrigger.addEventListener("refresh", () => { setupSplits(); }); });

Thanks so much for the info! I have tried the following stuff, but I realized that I probably will have to do some whole page loading animation as a loader instead. It will look great and fix my issue!

<script setup> const { $gsap, $ScrollTrigger, $SplitText, $ScrollSmoother } = useNuxtApp(); function setupSmoothScroll() { $ScrollSmoother.create({ smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices) }); } function setupSplits() { const paragraph = document.querySelectorAll("p"); const header = document.querySelectorAll("h1, h2"); const parentSplit = new $SplitText(header, { // type: "words", linesClass: "split-parent", }); header.forEach((header) => { // Reset if needed if (header.anim) { header.anim.progress(1).kill(); header.split.revert(); } header.split = new $SplitText(header, { type: "lines,words", linesClass: "split-line", }); // Set up the anim header.anim = $gsap.from(header.split.words, { scrollTrigger: { trigger: header, toggleActions: "restart pause resume reverse", start: "top 120%", }, duration: 0.7, ease: "circ.easeOut", yPercent: 100, opacity: 0, stagger: 0.015, }); }); paragraph.forEach((paragraph) => { // Reset if needed if (paragraph.anim) { paragraph.anim.progress(1).kill(); paragraph.split.revert(); } paragraph.split = new $SplitText(paragraph, { type: "lines,words,chars", linesClass: "split-line", }); // Set up the anim paragraph.anim = $gsap.from(paragraph.split.words, { scrollTrigger: { trigger: paragraph, toggleActions: "restart pause resume reverse", start: "top 120%", }, duration: 0.5, ease: "circ.easeOut", yPercent: 100, opacity: 0, stagger: 0.015, }); }); } onMounted(() => { setupSmoothScroll(); $ScrollTrigger.addEventListener("refresh", setupSplits); setupSplits(); }); const route = useRoute(); watch( () => route.path, () => { $ScrollTrigger.refresh(); } ); </script> I am trying to restart ScrollTrigger when there is a locale change, because otherwise there is no animation for my text when the language is changed. My code where I have done the animations with scrolltrigger (default layout) ^^. I have tried: * Making a watch function for language change and restarting ScrollTrigger(does not work because the text is too quick to change to the other language resulting in the text being static. It does work when I make a timeout, but this results in the text being static for a quick period of time and then the animation begins. * Restarting ScrollTrigger when you press the locale change button (same issue as above) * Scoured the internet and found nothing that would help exactly my situation... Here I have a video where I first show what it should look like, and then what it looks like. Screen Recording 2023-10-11 at 16.00.30.mp4