Search the Community
Showing results for tags 'tailwind'.
Found 4 results
-
Can someone help, I'm trying to avoid the flesh of the text on the screen (FOUC). Also I'm trying to animate the text one by one, but seems like the timeline does not work as it supposed to. 'use client' import gsap from 'gsap-trial' import { useGSAP } from '@gsap/react' import { useRef } from 'react' import SplitText from 'gsap-trial/SplitText' gsap.registerPlugin(SplitText) export default function Page() { const container = useRef<HTMLElement | null>(null) const tl = useRef<GSAPTimeline | null>(null) useGSAP( () => { const titles = gsap.utils.toArray<Element>('p', container.current) titles.forEach(title => { const splitTitle = new SplitText(title) tl.current = gsap .timeline() .from( splitTitle.lines, { opacity: 0, y: 20, stagger: 0.02, autoAlpha: 0 }, '<' ) .to( splitTitle.lines, { opacity: 0, y: -20, stagger: 0.02, autoAlpha: 1 }, '<1' ) }) }, { scope: container } ) return ( <section ref={container} className='flex justify-center items-center h-screen' > <div className='text-2xl leading-[0px] invisible'> <p>My name is Illia</p> <p>I am a cool guy</p> <p>Great developer</p> <p>and a funny fellow</p> </div> </section> ) }
-
I have a menu drawer that has a ul with 6li's in it next.js, react, gsap, tailwind. I need to animate them, currently I am creating timelines for each li and creating refs then on mouse enter and mouse leave on the lis I am manipulating the specific timeline (playing and pausing it) using the index. I wanted to know if this is the most optimised way of doing this or not? MenuDrawer.js -
Hi again all, Supplied a codepen this time. Trying to get the onEnter and onLeave animations to work in a Flip filter animation. But the assets seem to keep popping in and out but only works sometimes. Been trying to debug for a few hours now but think I've hit a wall.
-
Hi all, Been trying to get a Vue with Tailwind implementation of the Flex Box example going for a couple of hours now but can't seem to make any headway on it. I must be missing something really simple but it just won't animate the flipping even though I'm just toggling 1 class. Any help would be greatly appreciated. Code is below. <template> <div class="flex w-screen h-screen group" @click="toggleDirection()" :class="{ 'flex-col' : col_mode }"> <div class="grid flex-1 text-5xl text-white bg-red-600 box place-items-center">1</div> <div class="grid flex-1 text-5xl text-white bg-blue-600 box place-items-center">2</div> <div class="grid flex-1 text-5xl text-white bg-green-600 box place-items-center">3</div> <div class="grid flex-1 text-5xl text-white bg-yellow-300 box place-items-center">4</div> </div> </template> <script> import gsap from 'gsap'; import { Flip } from "gsap/Flip"; export default { name: 'Home', data() { return { col_mode: false, state: null } }, mounted () { gsap.registerPlugin(Flip); }, methods: { toggleDirection() { this.state = Flip.getState('.group, .box'); this.col_mode = !this.col_mode Flip.to(this.state, { absolute: true, duration: 1, stagger: .2 }) } }, } </script>
