JLernDesign

@Rodrigo Thanks for the suggestion. The nextTick() approach wasn't working for me right away but I think I need to look deeper into what is delaying the layout shift - it might need more time than just one cycle. Perhaps setting a watcher for a property on the page and creating my ScrollTrigger when that changes would work. Appreciate the help!

I am wondering if there is a best practice to detect layout shift after a component is mounted before creating a ScrollTrigger instance. I noticed that if I create my ScrollTrigger instance right after onMounted is called, it is not correct, but if I add a short timeout it seems to work properly. This feels a bit hacky and I am curious if there is a better way to be sure your layout is set before creating the instance. Here is an example of my code. Does not work (starting value for trigger is incorrect): onMounted(() => { ctx = gsap.context((self) => { ScrollTrigger.create({ trigger: main.value, start: 'top top', end: 'bottom top', scrub: true, pin: true, }); }, main.value); }); Works as expected: onMounted(() => { ctx = gsap.context((self) => { setTimeout(function () { ScrollTrigger.create({ trigger: main.value, start: 'top top', end: 'bottom top', scrub: true, pin: true, }); }, 200); }, main.value); }); Thanks!

Thanks @Rodrigo for pointing me in the right direction. I discovered I also need to use nextTick() with the watcher before the instances can be accessed. This is the code I landed on that is working now. Appreciate the help! watch(posts, (newData) => { if (newData.length > 0) { nextTick(() => { gsap.to('.blog-thumb', {opacity: 1, stagger: 0.2 }); }); } });

I'm pretty new to Vue so hopefully this makes sense. I'm trying to figure out why I can animate a static element using the class name selector, but if I am creating dynamic elements they cannot be targeted by class name. Been searching all over the place and can't seem to find a good answer to this. I tried to use a ref for each element as well and that didn't work either. Thanks for the help! <script setup> import { onMounted } from 'vue'; import BlogThumb from './components/BlogThumb.vue'; import gsap from 'gsap'; onMounted(() => { // this selector works gsap.to('.wrapper', { duration: 0.5, opacity: 1 }); // this selector does not work (console error: GSAP target .blog-thumb not found) gsap.to('.blog-thumb', { opacity: 1, stagger: 0.2 }); }); </script> <template> <div class="wrapper"> <div class="blog-grid"> <BlogThumb v-for="post in posts" :key="post.id" class="blog-thumb" /> </div> </div> </template>

Thanks @Rodrigo for the thorough explanation. That was my hunch and you've confirmed it for me. I was just reading another post you had commented in (https://gsap.com/community/forums/topic/29470-gsap-page-transitions-in-nextjs/) that had me question if React was the best choice for my interest in a heavily animated website. While it's certainly possible, it seems to me that Vue is more intuitive and easier to work with from an animation perspective. Thanks for the resources appreciate the help!

Hi, I'm a long time GSAP fan dating back to the Flash days and trying to migrate to a js framework to build a SPA with nice fluid page transitions that integrate with a router. Curious of opinions on a better framework that really lets you be free with GSAP animations. I've been learning React/Next and finding that page transitions are not that intuitive and have noticed a lot of beautiful animated sites out there were done in Nuxt. Curious if I should change course and learn Vue/Nuxt to get the most out of all the animation goodness I love from GSAP? Thanks!

@Rodrigo Thanks for providing this approach for page transitions in React I'm finding it really helpful in my learning. I was wondering is there a simple way to make it execute the enter and exit transitions at the same time? That's the part I can't figure out as it seems to have to run the exit first, then run the enter transition. Thanks!

Thanks for helping me resolve the issue and understand this better! Excited to get moving with v3.

Actually the map file is fixing the problem when I view on the server, just not when I test locally.

No build tool, just loading the script at the bottom of my HTML. I am able to load the gsap core without any problems. Same error happens if I try to load any of the gsap plugins. Just loading these scripts: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/MotionPathPlugin.min.js"></script> <script src="js/DrawSVGPlugin.min.js"></script> Also tried including that map file and still throwing the error. Only thing working right now is to remove the line of code at the bottom.

The updated ScrollMagic files did not solve the issue so I guess that wasn't it. Also tested without ScrollMagic entirely and same error. I went into the DrawSVGPlugin.js file and just deleted the last line that was looking for the map file (below) and now it's working. //# sourceMappingURL=DrawSVGPlugin.min.js.map Is there a danger in removing that line? Is there a way I can get access to the DrawSVGPlugin.min.js.map file? It wasn't listed with the others at the link above. Thanks!

I am indeed loading ScrollMagic! Nice catch. That must be the issue. Thanks so much for pointing me in the right direction.

This feels like a simple issue but I am wracking my brain to get it working. Never had an issue before until I switched to GSAP 3. I have a local copy of the DrawSVGPlugin that I am loading with this code: <script src="js/DrawSVGPlugin.min.js"></script> And then when I go to view the page I am getting a bunch of errors in the console: [Error] Not allowed to load local resource: file:///Users/JLern/WORK/dev/js/DrawSVGPlugin.min.js.map [Error] Not allowed to request resource [Error] Cannot load file:///Users/JLern/WORK/dev/js/DrawSVGPlugin.min.js.map due to access control checks. Do I need a file called DrawSVGPlugin.min.js.map as well? Any thoughts? Thanks for your help!

@PointC That is indeed what I was looking to do. I'm not sure I totally get why it works, but it works! Thank you

I am trying to figure out a method to create the illusion that a tiny segment of a line is traveling along the path it's on. In my codepen, I thought the right place to start was to draw the path on, then draw it off as shown first. What I imagine is there is a way to do this in rapid succession so as it is drawing each new part of the path, it is also undoing the portion behind it (desired result shown next to animation). Thanks for your help!