Hautie

Hi, i cnat find any info about this VUE + GSAP tutorial there guy uses @before-enter , for me worked v-on:before-enter but it's not the case. This part works as intended <transition class="relative w-screen" appear v-on:before-enter="beforeEnter" v-on:enter="enter" > <h1 class="text-base text-[10vw] text-center uppercase">About</h1> </transition> var beforeEnter = (el) => { el.style.transform = 'translateY(-60px)' el.style.opacity = 0 } var enter = (el, done) => { gsap.to(el, { duration: 1, y: 0, opacity: 1, onComplete: done }) } But! This thing doesn't work at all <transition class="relative" appear v-on:before-enter="beforeEnter" v-on:screen-enter="onScreenEnter" > <div class="z-3 sticky w-[25vw] h-auto pt-[3vw] pb-[3vw] pl-[5vw] inset-y-0"> <img class="absolute" :src="'src/assets/images/' + frontCan + '.png'" alt=""> </div> </transition> var beforeEnter = (el) => { el.style.transform = 'translateY(-60px)' el.style.opacity = 0 } var onScreenEnter = (el, done) => { console.log('in screen') gsap.to(el, { scrollTrigger:el, start: 0, duration: 1, y: 0, opacity: 1, onComplete: done, start:"top center", end:"max" }) } Also VUE method handling seems not working in code pen

There is any possibilities to animate changing themes in tailwind? for example: <div class="themeName absolute w-[75vw] h-auto mt-[15vw] right-0 select-none"> <div class="z-1 absolute w-[35vw] h-auto inset-0"> <img class="mouse" :src="'src/assets/images/' + backgroundCan + '.png'" alt="" parallax_value="20"> </div> </div> How i can animate theme change? something like from black to pink