Intro Animation using Flip plugin with NextJS as framework

[tomg55555]

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;

 

 

[Cassie]

Hey there!

 

Here's a simple FLIP example with React, the main difference is using React's state to store the FLIP state - hope it helps

See the Pen GRepYpB?editors=0011 by GreenSock (@GreenSock) on CodePen

[tomg55555]

@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!

[Cassie]

Quote

 

@Cassie

Thank you but for some reasons the changes are not being animated by Flip and I can't figure out why:(

 

Have you got an updated demo showing what you've done? We can't help unless we see your code.

 

Quote

Also I would like a tip on how to trigger the animation when the component mounts (as an intro animation).

In terms of running this on load you just need to add a new useGSAP function that runs the same code as the shuffle button currently does, if this is confusing, take a look at this section of our React docs - https://gsap.com/resources/react-basics#creating-and-controlling-timelines

See the Pen zYbrBOP?editors=0010 by GreenSock (@GreenSock) on CodePen

[tomg55555]

@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

[GreenSock]

Your selector wasn't selecting anything.  

Are you trying to do this?: 

https://stackblitz.com/edit/stackblitz-starters-on468c?file=app%2Fpage.tsx

[tomg55555]

@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]

Hey, as Jack pointed out, your selectors weren't actually grabbing the elements that were changing. This is just grabbing the container

 

setLayout(Flip.getState(titleRef.current));

 

The container and the elements inside are moving so you need to grab both and then also add nested:true

 

https://stackblitz.com/edit/stackblitz-starters-bhj216?file=app%2Fpage.tsx

[tomg55555]

@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]

Yeah as I showed in the demo above, you would need to fire it on load with another useGSAP hook.

I linked to this section in our guide which explains more. https://gsap.com/resources/react-basics#creating-and-controlling-timelines

If you want to know more about contextSafe you can see go to this section of the guide. https://gsap.com/resources/React#making-your-animation-context-safe
 

edit

I just tried this and realised it's a bit messy because of React's strict mode thing (React 18 fires effects twice in strict mode, so we need to ignore the second call or flip's state will be saved *after* the classes are changed in the DOM. 🫠 React makes everything so tangly.

https://stackblitz.com/edit/stackblitz-starters-bhj216?file=app%2Fpage.tsx

If anyone sees a better way feel free to jump in. 
 

[Cassie]

Hopefully this has you in a better place but just a note that FLIP can be tricky and React can be tricky, in completely different ways.

 

So I really recommend having a non-react demo to hand so you can sanity check your GSAP code and make sure it's working without React. There are a mixture of React specific issues and confusion about how Flip works in this thread. If you're new to both GSAP and React this just seems like trying to figure stuff out on hard-mode.

 

I would suggest making the animation work exactly as you want in codepen in a vanilla setup, and then trying to port it over into React land. Then at least you'll get a grasp of which issues are GSAP/Layout/Selectors and which are React/state/rendering.

[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 

[GreenSock]

Personally, that way of structuring things seems rather unintuitive to me. Here's how I'd do it: 

https://stackblitz.com/edit/stackblitz-starters-dnmmaw?file=app%2Fpage.tsx

 

Does that help?