Animating an element using Flip state twice in order

[Fettahaud]

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,

  });

});

[Toso]

it would be awesome if you could add a demo

 

 

[Fettahaud]

Here is a mini demo, but it is not clear as much as the image above

See the Pen OJdwjQR by Fettah_Aud (@Fettah_Aud) on CodePen

[mvaneijgen]

Hi @Fettahaud welcome to the forum!

 

We ask for a minimal demo, so that we can dive directly in to the code and help you figure out a solution for your problem. A minimal demo with the really helpful illustration is the perfect combo! 

 

Flip is for animating between TWO states, not multiple states as you've already figured out. So my advies would be create the second element and do the same logic for that one, then just switch the elements in the middle of the timeline and you're done! 

 

Hope it helps and happy tweening! 

 

See the Pen yLZqpXP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Fettahaud]

Well, I think I reached the border, sir. Thank you for your help

[Fettahaud]

Hey @mvaneijgen, I've tried your solution and it is not working in my case(multiple spheres animating into different positions)

Actually, this is what I'm trying to achieve, do you have any ideas or advice 👉👈🥲

[Toso]

yes I think now it's a different thing since the animation is not hooked to the scroll, it's achievable I'm working on it but getting small issues with reversing it 

[Fettahaud]

Ohh, thank you man, reversing was a big challenge for me as well. 

But the animation is hooked with the scroll(I know maybe the video is missing little bit) 

[Toso]

in the video, i see that when you hit a trigger the animation plays (each circle goes to place )

and nothing happens till you hit another trigger to animate them again to the final position 

 

what I meant is that you do not want them scrubbed with the scroll, or do you?  I'm little confused right now but what im working with it is not scrub version 

 

[Fettahaud]

Ohh, I thought different thing, however this is what I've made so far https://fettahaud.github.io/Catalyst-animation/ the scrub should work only till the orange sphere 

[Toso]

see here 2 boxes b , c 

 

your animation right now is scrubbed like the b box ( hooked to the scroll )

 

what im asking here can it be like box c ? Once you hit the trigger it plays so we can save the new values once the animation is end to start another trigger with it  

 

 

 

See the Pen mdvGyve?editors=1010 by ahmed-attia (@ahmed-attia) on CodePen

[Fettahaud]

If this is the only possible way, then I think we can make it like box C

[mvaneijgen]

I don't really see what is different here? The only thing that is different from the demo that is marked as a solution is that there are three shapes instead of one, so all the logic needs to get duplicated for the amount of shapes times the amount of locations you want (eg 3 shapes x 2 locations = 6) 

 

Then the logic is still the same, do one animation * 3. After that is done animating swap out the shapes for the shapes that will move to the final position and do the animation to the end state. You need to duplicate all the shapes (the same as in the demo), so there will be two blue spheres, two orange and two white. You'll have to hide the original once (the same as in the demo) as soon as you want to animate the duplicated once to their final position.  

 

If you want it to happen on scrub or not is up to you, just set scrub to false and use the toggleActions in that case.

[Rodrigo]

Hi,

 

Maybe this demo can provide a good starting point:

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

 

Hopefully this helps.

Happy Tweening!

[Toso]

@mvaneijgen you don't know how many times I tried to find another solution but kept ending up going back to your solution over and over  🤣  thank you so much 🙏😇

[Fettahaud]

Hey @mvaneijgen, I've tried your solution on those multiple spheres and it seems that it is not working as expected. I did it in 2 different ways: 

Here is the first way 

See the Pen RwvYpBw by Fettah_Aud (@Fettah_Aud) on CodePen

 

This is the second way; using a function to generate a tl with a scroll trigger for each sphere 

See the Pen KKJxZqa by Fettah_Aud (@Fettah_Aud) on CodePen

 

[mvaneijgen]

You are appending the spheres, to the .img-wrapper and in your second flip, you're getting alle the .sphere elements that are connected to .img-wrapper, so in your second flip you're targeting all six spheres. I would suggest given all elements distinct names, so that you know exactly what you're targeting 

 

See the Pen GRzXdRe?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen