JoaoJack

OK, sorry for disturbing, guys. Getting help when registering to Club Greensock was my #1 motivation, but I don't want, for every question I have, to install on a codepen or codesanbox tailwind, GSAP (but not via CDN, via tgz AND authentification), + nuxt in order to reproduce exactly my issue. I thought someone could think about the problem without a codepen, maybe detecting a coding error, maybe seeing a step which should not be specified in the mounted() lifecycle hook ? Maybe providing any hints, a path, about DOM behavior on refresh, something ? I understand this is impossible, nobody's fault but mine.

Hi Greg, I meant when i hit "reload" on my browser. Sorry, recreating it in codepen would not reproduce my config : gsap imported via tgz, tailwind, external component, etc.

Hello, I have a very simple scrollTrigger animation on an iterated component. Everything works fine on fist load. But when I reload the page, nothing works anymore. To test it, I've reduced all my script to gsap.set autoalpha 0, and it's the same : works fine on first load, but disarmed on refresh. my code excerpt : (sorry it would be a real mess to emulate it on codepen) : <template> <div id="home" class="bg-[#ffffff] relative mx-auto flex flex-col overflow-x-hidden "> <div class="flex flex-col mx-auto justify-around items-center w-full"> <stories-square-line class="targetX" v-for="(i,index) in stories" :pos="index % 2 !== 0" :key="index" :theme="i.slug" :content="i.content" /> </div> </div> </template> <script> import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js' export default { mounted () { gsap.registerPlugin(ScrollTrigger) gsap.utils.toArray('.targetX').forEach((comp, i) => { gsap.set(comp,{autoAlpha:0}) // gsap.fromTo(comp, {autoAlpha:0},{autoAlpha:1, duration:"2", // scrollTrigger:{ // toggleActions: "play complete reverse reset", // trigger: comp, // start: "top window.innerHeight/4", // onEnter: ({progress, direction, isActive}) => console.log(progress, direction, isActive) // } // }) })

Hi everyone, I'm looking for an example of a video animation by scroll such as this vanilla example attached but using scrollTrigger. Thanks !

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>