Liam_hyperisland

Hi, I always get very good answers from you, thank you. My goal is to understand GSAP to the fullest, but it becomes difficult when one is good in GSAP but does not have a basic knowledge of the basic stuff. There are some tutorials that show, for example, how to use exit animations in Vue, React et cetera , but I think some of us don't really understand what's happening in depth. For everyone who wants to understand how GSAP and Single Page Applications are connected, I solved the exit animations as follows: In my example, I used a function to switch components, so to achieve an exit animation, I run an animation and then call the function that switches components using GSAP's onComplete. if (window.location.pathname === "/" && destinationPath !== "/") { var tl = gsap.timeline(); tl.to(".logo, #scroll-title", { yPercent: 100, opacity: 0, duration: 1.4, ease: "power2.out", }, "start"); tl.to(".box", { xPercent: 100, opacity: 0, stagger: 0.1, duration: 1.4, ease: "power2.out", onComplete: transitionToPage }, "start");

Hi, I got a school assignment where I'm supposed to create a SPA in vanilla JavaScript. I've added some animations to show off a bit, but honestly, things got much more difficult. I have the following questions: I've added a very simple GSAP animation - is it allowed the way I've done it? I've been thinking for hours on how to add an exit animation (for example, having a text fade out). Do you have any suggestions to help me think along the right lines? Simple example Since routing is involved, I can't use CodePen and instead I'm using CodeSandbox. The code is very simple where you can only switch between the homepage and the about page. No CSS or such added. Thank you

Thanks again Rodrigo for your great answers.

I got my about the answer from: https://gsap.com/resources/React/. It's not really about Vue but I guess the principle and the logic is the same.

I had to edit the post because I found that the React x GSAP documentation is quite helpful for Vue applications as well. What I'm trying to recreate is a Vue version of the 'Reusing Components' example found in the React documentation. Can anyone confirm whether my Vue version is equivalent to the React example? Reusing Components (The only difference is that I'm using a timeline and reusing two components) Official React example of Reusing Components Thank you

Hi, I'm aware that this question may not be entirely GSAP-related, but I'm hoping that there might be a GSAP user here who maybe can help me. I've integrated GSAP with Lenis in Nuxt 3 and I'm wondering if I did it correctly. It works but sometimes, it may look like it works. Here is a minimal demo: Minimal demo Here is the code from the minimal demo if you would rather read it here. Hola.vue <template> <slot></slot> </template> <script setup> import Lenis from '@studio-freight/lenis'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; onMounted(() => { const lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), }); lenis.on('scroll', ScrollTrigger.update); gsap.ticker.add((time) => { lenis.raf(time * 1000); }); gsap.ticker.lagSmoothing(0); function raf(time) { lenis.raf(time); requestAnimationFrame(raf); } requestAnimationFrame(raf); }); console.log('Tjo!'); </script> Section.vue <template> <div class="section" style="background: red"></div> <div class="section" style="background: blue"></div> <div class="section" style="background: green"> <div class="section flex-center column" ref="main"> <div class="box">box</div> </div> </div> </template> <script setup> import gsap from 'gsap'; const main = ref(); let ctx; onMounted(() => { ctx = gsap.context((self) => { const boxes = self.selector('.box'); boxes.forEach((box) => { gsap.to(box, { x: 150, scrollTrigger: { trigger: box, start: 'bottom bottom', end: 'top 20%', }, }); }); }, main.value); // <- Scope! }); onUnmounted(() => { ctx.revert(); // <- Easy Cleanup! }); </script> App.vue <template> <Hola> <Section /> </Hola> </template> Thank you

Thank you for the help and even more thanks for a very well-written explanation as well.

Hello, I'm wondering if I'm using matchMedia correctly in Nuxt? Using gsap in SSR is kind of confusing for me.. https://stackblitz.com/edit/nuxt-starter-5q7dpf?file=pages%2Findex.vue

Exactly what I'm was looking for. I'm sorry for not reading the docs properly before.

Hi, thank you for answering. https://codepen.io/nimrah/pen/yLxXQmZ?editors=1010 As you can see, when we are in portrait mode, the box moves horizontally. When we change the screen to landscape mode and then refresh the page, the box moves vertically. How can I tell GSAP to change direction of the box without refreshing the page?

Hi, I created a simple animation where the elements moves horizontally or vertically depending on the screen size. In order to change the conditional logic, I need to refresh the page, or else the animation will be incoherent. I tried to refresh the page after every resize but the animation was caught in a loop. Is there's a way to change the logic of the animation whenever I resize the browser window? let cartesianPlane = window.matchMedia("(orientation: landscape)").matches ? "xPercent" : "yPercent"; const bool = window.matchMedia("(orientation: landscape)").matches; const val = bool ? 20 : -40; let scroll = gsap.timeline({scrollTrigger:{ trigger:".section-home", start: "center center", end: "bottom center", scrub: true, }}) .to(".text-container", { [cartesianPlane]: val, }, "start") .to(".text-container-r", { [cartesianPlane]: 20, }, "start") Happy sunday! /Liam

Thank you Abdullah! I was also looking for a solution

Exactly! Thank you Jack and thank you for your quick response.

Hi everyone, I'm learning Flip for the moment and was wondering if there is a smart way to make the text resize depending on the width of the child container. Thank you