Changing the parentNode of an element but animating between the two section using Flip and ScrollTrigger

[ShibCode]

I want to create something like the thing in the video where the image is moving between sections.

I have given it a try using Flip and ScrollTrigger but I run into some issues where the image just bugs out and get vanished from the screen. I am sorry I can not provide a codepen, it would be really appreciated if someone could help me out.

Here is the code:

const [activePlace, setActivePlace] = useState(0);

 

  useGSAP(

    () => {

      new ScrollTrigger({

        trigger: "#section-1",

        end: "bottom bottom",

        markers: true,

        onEnter: () => {

          setActivePlace(1);

        },

        onEnterBack: () => {

          setActivePlace(1);

        },

      });

      new ScrollTrigger({

        trigger: "#section-2",

        end: "bottom bottom",

        onEnter: () => {

          setActivePlace(2);

        },

      });

    },

    { dependencies: [], revertOnUpdate: true }

  );

 

  useGSAP(

    () => {

      if (activePlace === 1) {

        const prevImg = document.querySelector(".obj");

        const state = Flip.getState(prevImg);

        document.querySelector(".obj-wrapper-1").appendChild(prevImg);

        Flip.from(state, {

          scrollTrigger: {

            trigger: "#section-1",

            end: "bottom bottom",

            scrub: true,

          },

        });

      } else if (activePlace === 2) {

        const prevImg = document.querySelector(".obj");

        const state = Flip.getState(prevImg);

        document.querySelector(".obj-wrapper-2").appendChild(prevImg);

        Flip.from(state, {

          scrollTrigger: {

            trigger: "#section-2",

            end: "bottom bottom",

            scrub: true,

          },

        });

      }

    },

    { dependencies: [activePlace], revertOnUpdate: true }

  );

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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

[ShibCode]

@GSAP Helper Thank you for your feedback

https://stackblitz.com/~/github.com/ShibCode/sombra-network

There may be some bugs on the first load but refreshing the preview should work fine.

Also make sure to view on a bigger screen as it is not very responsive

[mvaneijgen]

Hi @ShibCode welcome to the forum!

 

What files should we be looking at? You're sharing the readme file which obviously doesn't have any GSAP code. We also ask for a minimal demo not your whole project! So please delete all irrelevant code so that we can only focus on the code that is causing the issue. 

 

You'll see that when making it simple you'll probably solve the bug your self and if not we'll be happy to take a look for you. Hope it helps and happy tweening! 

[ShibCode]

@mvaneijgen Sorry about that. I have gone through it and cleaned the unnecessary code. Also you may only work in the home folder within the pages folder as that is where all the code is.

Thanks

[Rodrigo]

Hi,

 

Unfortunately using a full repo to create a demo forces us to fork the entire repo into an existing github account, while we understand that this is easier and faster it does forces us to fork the repo if we want to tweak your demo.

 

Also you didn't specify the file where we should look into it and due to the complexities of your demo I'd rather create a new one from scratch instead.

 

In terms of the issue you're seeing, this is a great case for using Flip Fit:

https://gsap.com/docs/v3/Plugins/Flip/static.fit()

 

Here is a demo in React:

https://stackblitz.com/edit/vitejs-vite-q8pmoy?file=src%2FApp.jsx&terminal=dev

 

Hopefully this helps.

Happy Tweening!