Jump to content
Search Community

How to append child using FLIP & ScrollTrigger?

kvncnls test
Moderator Tag

Go to solution Solved by GSAP Helper,

Recommended Posts

Let's say I have a hero section on a website.
I have the h1 title of the website right in the middle of the hero section.

On scroll using ScrollTrigger, the title gets appended to the top left of the header using GSAP's FLIP.
This would be on Nextjs where the header is a separate component from the hero section component.

Link to comment
Share on other sites

Hey there!

 

GSAP can animate this for you but how to manipulate the DOM is up to your framework really.

In my experience some frameworks don't like you moving DOM elements around. They'd prefer that you delete the old one and create a new one. If you go that route you can add  data-flip-id="somethingUnique" to your outgoing and incoming DOM element and FLIP will keep track and match them up to animate.

Hope this helps!

(If you need more help can you make us a minimal demo? Thanks!)

  • Like 1
Link to comment
Share on other sites

I'm not a GSAP or React expert  and haven't played around with Scroll Trigger, but I thought I'd chime in since I attempted something similar. Originally, I tried React portals but when the component / element moves to a new location, it has to unmount and remount, causing a flash when it flips.

 

Libraries like these may be able to help you. They keep the internal state of the component when it's reparented.

 

https://www.npmjs.com/package/react-reverse-portal
https://github.com/Paol-imi/react-reparenting (experimental)

 

Possibly something like this could work:

 

const imageState = Flip.getState(element);
/* reparenting code to move the element to a new location */
Flip.from(imageState, {
    duration: 1,
    ease: 'expo.inOut'
});

 

You may also need to add a data-flip-id and a targets property

 

  • Thanks 1
Link to comment
Share on other sites

2 hours ago, Cassie said:

Hey there!

 

GSAP can animate this for you but how to manipulate the DOM is up to your framework really.

In my experience some frameworks don't like you moving DOM elements around. They'd prefer that you delete the old one and create a new one. If you go that route you can add  data-flip-id="somethingUnique" to your outgoing and incoming DOM element and FLIP will keep track and match them up to animate.

Hope this helps!

(If you need more help can you make us a minimal demo? Thanks!)

 

Hi Cassie, thanks for the reply!

Here's what I've currently got in Nextjs but I'm getting the error below.

I don't believe I'm calling the elements incorrectly here.
880664801_CleanShot2022-06-15at15_26.25@2x.thumb.png.89cea9131fb8f1c0ab5d577a2ac834e6.png
 

// Markup in my hero section component
<section className="section hero">
  <h1 id="logo-title" data-flip-id="flipTitle">
      Title Example
  </h1>
</section>

// Markup in my header component
<header className="header">
  <a data-flip-id="flipTitle"></a>
  <button>Menu Btn</button>
</header>
let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".section.hero",
    start: "10% 75%",
    end: "center center",
    scrub: 1,
    onScrubComplete: flipAppend(),
    once: true,
    markers: true,
  },
});

let flipAppend = () => {
  let state = Flip.getState(title);
  headerTag.appendChild(title);
  Flip.from(state, {duration: 3, ease: "power4.inOut"});
};
Link to comment
Share on other sites

  • Solution

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

 

By the way, this definitely looks wrong: 

onScrubComplete: flipAppend() // <- Executes IMMEDIATELY!

I assume you meant to do this: 

onScrubComplete: flipAppend

I also wonder if you're using refs in React but treating those as DOM elements, trying to append() them or something. Again, super difficult to troubleshoot by looking at a few excerpts of the code. That minimal demo will be essential for getting you a good answer.

Link to comment
Share on other sites

33 minutes ago, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

 

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

 

By the way, this definitely looks wrong: 

onScrubComplete: flipAppend() // <- Executes IMMEDIATELY!

I assume you meant to do this: 

onScrubComplete: flipAppend

I also wonder if you're using refs in React but treating those as DOM elements, trying to append() them or something. Again, super difficult to troubleshoot by looking at a few excerpts of the code. That minimal demo will be essential for getting you a good answer.

 

 

Thank you!! That was it! It was the flipAppend() line. It should've just been "flipAppend".

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...