GSAP Flip animation jumping

[Yuri Silva]

I'm trying to create an animation that a bigger text animate to a smaller one, but the animation is just jumping, I've tried other things from the docs/community but I can't fix this... Am I doing the right thing?

See the Pen VwJeVJL by projects-yuri (@projects-yuri) on CodePen.

[alig01]

 

Hey,

 

You were almost there, but got the setup a little bit wrong. No worries, everyone’s been there. Basically, you need to get the state of the first h1 and keep in mind that the default values Flip will "record" are the current position, size, and rotation of your element, so font-size won't be recorded by default. To set it manually, it should look like this:

const state = Flip.getState("h1", { props: "fontSize" }); //It's also working with "-" font-size, but choose camelCase to be safe

 

After that, you need to make changes to the element you recorded (the first h1), which means you need to change its font-size using CSS. Since you already have a CSS class for the smaller text, you can do something like this:

big.classList.add("lore-first-heading-small");

 

As you can see, the second h1 is irrelevant for the setup and can be removed.

 

The full code could look like this:

const big = document.querySelector(".lore-first-heading");

document.addEventListener("click", () => {
  const state = Flip.getState("h1", { props: "font-size" });

  big.classList.add("lore-first-heading-small");
  // big.classList.remove("lore-first-heading"); if you want to remove the other class

  Flip.from(state, {
    duration: 5,
    ease: "power4.inOut"
  });
});

Don't forget to remove display: none from the class .lore-first-heading-small and everything should work as expected.

 

I hope this helps, and good luck with your project!

 

Edit: If you notice some flickering, replace align-items: center; with text-align: center; in the body CSS. However, since this isn't your actual setup, it shouldn't be an issue later.