tomg55555

@Cassie Thank you so much for the patience and for the solution. Next time I'll try avoid the hard mode and spend more time on the basics. I also would like to point out the quality not only of GSAP itself (which are impressive) but also the staff preparation and dedication which are even more if you consider it's free. I definitely will consider upgrading to support your work guys

@Cassie this was really helpfull, now if I want to fire the animation on load I should wrap it on a useGSAP hook? Should I also include the contextSafe?

@Cassie @GreenSock Now animation is working but as you can see it's not smooth at all, at the beginning letters G and A seems to "jump" from nowhere https://stackblitz.com/edit/stackblitz-starters-heejfa?file=app%2Fglobals.css

@Cassie here it is the demo: https://stackblitz.com/edit/stackblitz-starters-heejfa?file=app%2Fpage.tsx for sure I'm doing something wrong cause I really can't see any animation

@Cassie Thank you but for some reasons the changes are not being animated by Flip and I can't figure out why Also I would like a tip on how to trigger the animation when the component mounts (as an intro animation). @Rodrigo I know you have super-powers, please give me a light in the dark!

Hello there, I'm struggling a lot trying to figure out how to create an animation and I found very few resources and examples about the flip plugin on react frameworks. A codesandbox can be found here: https://stackblitz.com/edit/stackblitz-starters-heejfa?file=app%2Fpage.tsx What I want to do: My goal is to create an intro animation for my website, a title with 4 letters will be showed at the center of a page and then the words will move in different positions and the other elements of the page will fade in. I want to use the flip plugin to achieve this but honestly I'm wondering if it's even possible. As I want the animation to trigger when the page loads I wrapped the 3 steps (get state, make changes, animate with flip) in a useLayoutEffect hook all wrapped in gsap.context() to be able to revert it as a good practice but since this react hook renders twice in dev I used the GSAP hook. The problem: First of all I don't know if the path I choose is the right one for an intro animation using a framework like Next. The second most important problem is that the flip animation is not working at all, I have my changes in the DOM but they are not animated at all. Any kind of help will be highly appreciated. 'use client'; import styles from "./page.module.scss"; import {useLayoutEffect, useRef} from "react"; import { Flip } from "gsap/dist/Flip" import { gsap } from "gsap" import {useGSAP} from "@gsap/react"; const Home = () =>{ gsap.registerPlugin(Flip); const container = useRef(null); const titleRef = useRef(null); useGSAP(() => { const state = Flip.getState(titleRef.current); console.log(state); // @ts-ignore titleRef.current.classList.remove(styles.after); // @ts-ignore titleRef.current.classList.add(styles.before); Flip.from(state, { targets: titleRef.current, delay: 2, duration: 3, //ease: "power1.inOut", absolute: true, }); },{scope: container}); return ( <main className={styles.main} ref={container}> <div className={styles.after} ref={titleRef}> <h1 className={styles.heroText} id={styles.one}> TI </h1> <h1 className={styles.heroText} id={styles.two}> G </h1 > <h1 className={styles.heroText} id={styles.three}> A </h1> </div> </main> ) } export default Home;

Hello there. I'm trying to figure how to recreate some of animations of this website https://hervebaillargeon.com/ . In particular the hover on the menu elements when the order of the letters changes to go back to normal. I'm working on next js so anything react related is apreciated. Thank you in advance. Registrazione schermo 2023-11-24 alle 18.54.37.mov

I was missing the return function of the use effect. return () => ctx.revert();

here it is the stack blitz, I don't know why is working there but not locally on my app. https://stackblitz.com/edit/nextjs-fzthv4?file=pages%2Findex.js Registrazione schermo 2023-11-09 alle 12.34.08.mov

Thank you so much for your help Rodrigo, as expected I'm having troubles translating this from JS to NextJs. I'll show you errors I'm getting: 1st: end: () => "+=" + cards.length * cards[0].offsetHeight cards[0].offsetHeight, cards is giving me an error. 2nd: cards.slice(1).forEach((card, i) => { tl.fromTo(card, { yPercent: 0 again card in the middle line is underlined in red. I suppose the problem is at the beginning when I do create the array but I can't really understand what I'm doing wrong here. import React, {useEffect, useRef} from 'react'; import {gsap} from 'gsap' import {ScrollTrigger} from 'gsap/dist/ScrollTrigger' const Scroller = () => { gsap.registerPlugin(ScrollTrigger); const component = useRef(null); useEffect(() => { let ctx = gsap.context(() => { // create as many GSAP animations and/or ScrollTriggers here as you want... let cards = gsap.utils.toArray(".card"); console.log(cards.length); console.log(cards[0]); let tl = gsap.timeline({ scrollTrigger: { trigger: ".card-wrapper", pin: ".page-wrapper", start: "top top", scrub: true, markers: true, end: () => "+=" + cards.length * cards[0].offsetHeight } }); tl.add(() => { console.log("card", 1, "in place") }, 0.001); cards.slice(1).forEach((card, i) => { tl.fromTo(card, { yPercent: 0 }, { yPercent: -100, duration: 0.5 }); tl.add(() => { console.log("card", (i+2), "in place"); }) }) gsap.from("h1", { // <- selector text, scoped to this component! opacity: 0, y: 100, ease: "power3", duration: 2 }); }, component); }, []); return ( <div ref={component}> <div className="page-wrapper"> <div className="wrapper"> <div className="card-wrapper"> <div className="card card-1"> 1 </div> <div className="card card-2"> 2 </div> <div className="card card-3"> 3 </div> <div className="card card-4"> 4 </div> <div className="card card-5"> 5 </div> <div className="card card-6"> 6 </div> </div> </div> </div> </div> ); }; export default Scroller;

Hi there, It's my first post here I hope I can find some help here since I tried to look everywhere but did not find any solution to my issue. I'm trying to replicate the effect seen on this website "https://hervebaillargeon.com/", in the section above the landing where when you scroll down some videos are pinned and vertically overlapped. I'm working in a nextjs framework so react based solutions would be awesome but vanilla js it's super fine I'll figure out how to adjust it. As reference I used this codepen: https://codepen.io/GreenSock/pen/KKpLdWW but what I cannot really understand is how can I implement that in a container which is not scrollable by itself but is content is scrolled and pinned while scrolling the page. Thank you for the help!