Search the Community

i have problem in scroll trigger project page with outlet react-router-dom when first reload pinned not working in the other outlet . https://portfolio2024-two-black.vercel.app/project/live

I have a pinned section in my page, which makes the other Scroll triggers I have in different child components have their starting positions inaccurate. I tried refreshing the Scroll trigger(using ScrollTrigger.refresh()) in the main page(file) but the issue remained. Also I want to know if there is a way I can pass down an instance of Scroll trigger and Gsap to my other components, so If i refresh that one instance, it updates everywhere, or is there a better way to handle having multiple gsap and scroll triggers in different components but still being able to control them from the main page? Also I want to know if the better approach is to write all my animations in one useEffect with all the jsx in one page(file) or have some of the animations for different parts of the page as components which include their respective jsx. So pretty much everything in one page or components style ? I ask this because the component approach has been a headache for me, because one way or another the starting points end up inaccurate. I would apperciate if someone could help with a direction I could take. This is a simplified version https://stackblitz.com/edit/vite-react-tailwind-fpc1wz?file=src/App.jsx where I tried to refresh a child component but it didn't work

GS Community, I am in the process of rebuilding a GSAP website into a Vue.js project. I am in the very early stages of learning Vue, here is a good, free, video series and here is a very good (but it cost 10 dollars) Udemy course. My hope for this thread is to build out a full GSAP & Vue App. I will break out each component as I go and place it in a codepen (I have quite a few things done already, it will take me some time to go back and break things out). This will be a work in progress and the codepens will be updated in phases: Phase 1: will be to get just get things wired the Vue way. Phase 2: will be to use GSAP for the animations and transitions etc. Phase 3: Build everything as dynamic/reusable components. If all goes well this will turn into a Vue/GSAP component library of sorts for everyone to reference. Blake, one of the GreenSock Moderators, has graciously offered to help guide me (Thank you Blake). Goals for the thread/project: Navigation Button Component Section Content Component Section Hero Image Component Section Thumbnail/Modal Button Component Modal Component Password Modal Component Vertical Slideshow Component (I will also to help others build out a Horizontal Version). Slide-up Tab Component Radial Button/Checkbox Form Filtering based on a sector/classname (with persistence via local storage or a Vue method, if it exists - learning as I go ) All of the above is built in a non-Vue way here http://hainis.net/dev/ Note: that only the print/advil, print/amex, print/bayer slideshow content is sorted, all the other thumbnails will load a blank modal. This site has performance issues and at times the javascript, loaded via a Djax call, for the thumbnail buttons to launch the slideshow content is not binding properly. These issues and some prodding by Blake have made me venture down the Vue.js path. Side note: I'm learning, not there yet, to do things a DRY way; hopefully under Blake's guidance I will finally get this under control and tighten up the spaghetti code that I currently have. Okay, so that's the setup. Next post will be some useful links and a current state/NOT simplified codepen of the current Vue app.

Hi, I am trying to animated section with scroll created as components in React. You can find a similar effect to what I am trying to achieve here (the text on the right or the images inside the phone). In my animation I would like the headingOne to appear from the bottom of the screen and fade away towards the top of the screen, followed by the headingTow that should come from the right or left followed by the cards while the section is pined and only after the animation finished the normal scrolling would begin again. Doing this I have encountered some difficulties. One of which beaning an error that says ";" expected while using the TweenLite and I don't really see why... Also I am not use that I used gsap correctly. For the headingOne I would like to display it none, but only after the fade away animation finishes so the headingOne would come into the middle of the screen. I would greatly appreciate is you could take a look at the code pen and point out my mistakes. Thank you!

Hello, I'm really worried by a problem i have for a gsap scrollTrigger animation i try to implement in a nested Nuxt component. When previewing with markers activated, it appears that the start and end of the trigger are fixed, and not at all near the designated div. Sorry for the tailwind flood in the code - I've already successfully made gsap scrolltrigger animations with tailwind, but it was not in a nested component. I use GSAP with CDN, and scrolltrigger was doing well on other projects. My hypothesis is that the problem is related to a mounting + viewport-height + nested component stuff, but I'm stil lnew to this and i can't understand the problem. In this example, I use refs, but I've already tried a thousand times with a class trigger too (for example, <div class="trigger">) <template> <div ref="trigger" class='w-full h-screen text-black justify-center flex-1 align-middle my-auto relative p-4 pr-8 flex flex-grow bg-white box-border z-5'> <div class="relative flex h-full w-full flex-col"> <div class="flex h-full w-full shadow-inner bg-mastro2 absolute z-5 bg-cover bg-top">huh ?</div> </div> <div ref="carte" class="absolute overflow-scroll flex h-screen justify-end ml-auto "> <div class='p-5 rounded-xl bg-white bg-opacity-70 my-auto mr-10 z-6 flex flex-col w-1/2 justify-center'> <div class='loader_title font-display mb-4 text-gray-700 text-left leading-none text-5xl'>Votre point de départ idéal pour la Côte d'Azur.</div> <div class='loader_legend font-sans text justify'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Titae facere, voluptate vero ea a eius. .</div> <div class='loader_button mt-4 '><button @click="carta()" class="bg-opacity-50 hover:bg-opacity-100 border border-black p-3 w-32 text-center outline-none text-black bg-white">RESERVER</button></div> </div> </div> </div> </template> <script> export default { mounted() { const { trigger, carte } = this.$refs let hero_scroll = gsap.timeline({ scrollTrigger: { trigger: trigger, start: 'top center', end: 'bottom center', markers:true, scrub: true, } }) .to(carte, { x: -200, duration:3 }).reverse() }} </script>