zofia

@b1mind Cool! 👍Thank you very much! I'll try your method and play with the code. I'll let you know if it works for me.

Thanks @akapowl Yes, I suppose this is on Svelte's side, but I was hoping that someone had a similar problem and solved it. I did a little research, but couldn't find many examples of how to use Svelte + GSAP. I will try to find a solution. Any tips are always appreciated

Hi @Cassie If you're navigating between pages (Home — About), my GSAP animations are not working (the color elements should get smaller). The blocks only animate the first time you visit the website or when you refresh it. If you compare my demos (one is with and the other is without page transitions), you should see it. Thanks!

Hi guys! In my project, I want to use Svelte with Page Transitions + GSAP animations. I implemented the code from this tutorial: https://dev.to/giorgosk/smooth-page-transitions-in-layout-svelte-with-sveltekit-or-sapper-4mm1 Everything worked fine until I added GSAP animations. Would you have any advice on how to make it work? Or maybe there’s a better way for page transitions? I am eager to learn Here is a demo (use the top navigation Home / About) : Without Page Transitions: https://stackblitz.com/edit/sveltejs-gsap-220222-b-gcaiew With Page Transitions: https://stackblitz.com/edit/sveltejs-gsap-220222-b-mykraq I would appreciate any help on this. Thanks!

Ah, this time it was a quick and easy fix Thank you! @OSUblake

Yesterday I noticed that when I navigate from one page to another in my svelte app using ScrollTrigger.matchMedia and then resize the browser window, I see warnings in the console: "GSAP target not found" @OSUblake could you help me to get rid of them? What am I doing wrong? Here is a demo: https://stackblitz.com/edit/sveltejs-gsap-220222-b npm run dev Any help will be appreciated! 🙏

@OSUblake thanks a lot! 👍👍👍 I've tried both ways and ScrollTrigger.matchMedia() works better for me 👍 Here is the new codepen: https://codepen.io/zofiaifoz/pen/GROMVBz

Hi, I need advice on how to create responsive timelines (+ scrollTrigger). In my animation, I want to use different target heights (gsap.to) depending on the width of the browser window. In my case, I have a divider that should be higher on mobile and lower on desktop devices (after the animation is finished). These values should update when someone resizes the browser window. I tried to do this (codepen included) but when I resize the browser window, the animation behaves strange. I'm not sure if I should kill the animation and then recreate it... Ah, my head is tired today, please help Thank you!

OK, I found a way to do this. I just changed gsap.from to gsap.to (and updated the heights of course - so in CSS i have initial values). Now everything works as it should when changing the size of the browser window. https://codepen.io/zofiaifoz/pen/RwZNRJa

Hi, I have a question regarding my animated section dividers. When I change the size of the browser window the divider "jumps" ugly (it is not smooth as it was before resizing the window): After refreshing the browser it's fine again. How can I prevent it?

thanx @OSUblake, you are definitely right, I will read the thread you suggested and see if I can get it right.

Hi, in my project I use many different "dividers" which change their height when they enter and leave the viewport. I use SvrollTrigger for that but I can't force it to do what I want :). Everything has worked fine for me so far but recently I decided to add a table of contents to one of my pages. I use anchor links which should jump to their respective sections. This is where the problem starts - the navigation does not lead me to the right sections. So, for example, if I click in the navigation on section 3 - it takes me to section 4 or somewhere between sections. For better understanding, the general concept of my website is here: https://gracious-brown-97593d.netlify.app Maybe someone could help me find a solution? I made a minimal demo so you can look at it. Thank you!

@OSUblake @Cassie I just found out that my problem was caused by page transitions. When I throw them away, everything works as it should with GSAP ScrollTrigger Here is the code that caused the problem: _layout.selte <script> import Header from '$lib/global/Header.svelte'; import Footer from '$lib/global/Footer.svelte'; import '../styles/c.css' import PageTransitions from '$lib/global/PageTransitions.svelte'; import { navigating } from '$app/stores'; </script> <Header/> <main> <PageTransitions refresh={$navigating}> <slot/> </PageTransitions> </main> <Footer/> PageTransitions.svelte: <script> import { fly } from 'svelte/transition'; export let refresh = ''; </script> {#key refresh} <div in:fly="{{ y: 10, duration: 300, delay: 300}}" out:fly="{{ y: 10, duration: 300 }}"> <slot/> </div> {/key} Now I need to figure out how to use page transitions to get them working with SrollTrigger, but at least half of my problem has been solvd and I'm already happy. 👍

Oh no, I've created so many GSAP animations and now something like this.. 😮 So as I understand it, I have to look for help on the Svelte forums. Or maybe @Dipscom you could help here, please? 🙏🙏 I see you have quite a bit experience with Svelte. 🙂 @OSUblake thank you very much for your help. Hopefully, I'm a step closer to solving my problem

@OSUblake yes I see them.. see the attached file. but when I leave and come back all animations are gone - they don't start. I have to refresh the browser and it works again..