Jump to content
Search Community

Animating an element using Flip state twice in order

Fettahaud
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Posted

image.thumb.png.79ebaa5a666e62024723a4817410519c.png

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,
  });
});
Posted

it would be awesome if you could add a demo

 

 

  • Solution
Posted

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.

Posted

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

Posted

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 

Posted

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) 

Posted

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 

 

Posted

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.

Posted

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

Posted

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.

  • Like 1
Posted

Hi,

 

Maybe this demo can provide a good starting point:

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

 

Hopefully this helps.

Happy Tweening!

  • Like 1
Posted

@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 ??

Posted

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.

 

Posted

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.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...