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 }
);
vid.mp4