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

@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

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

@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

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

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 }

  );