This image explains what I want(I hope it is enough and no need for a Pen).
I have a sphere animated from the initial state to the second state(the middle of the screen), at this step, I want to catch the current state to be able to animate to the final state(the bottom of the screen).
Is this possible to do using Flip?
I've tried to catch the new state once the first animation is completed, but didn't work as well
spheres.forEach((sphere, i) => {
const state = Flip.getState(sphere, { props: "transform,z-index" });
const sphereParent = spheresParents[i];
sphereParent.appendChild(sphere);
const flip = Flip.from(state, {
simple: true,
duration: 1,
onComplete: () => {
const newState = Flip.getState(sphere, { props: "transform,z-index" });
spheresFinalParent.appendChild(sphere);
const flip2 = Flip.from(newState, {
simple: true,
duration: 1,
});
ScrollTrigger.create({
trigger: ".animation-final",
markers: true,
start: "top 10%",
end: "center 10%",
scrub: true,
toggleActions: "play none none reverse",
animation: flip2,
});
},
});
ScrollTrigger.create({
trigger: "#scroll-container",
markers: false,
start: "50% 10%",
end: "100% 10%",
scrub: true,
toggleActions: "play none none reverse",
animation: flip,
});
});