Fettahaud Posted November 27, 2023 Posted November 27, 2023 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, }); });
Fettahaud Posted November 27, 2023 Author Posted November 27, 2023 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.
Solution mvaneijgen Posted November 27, 2023 Solution Posted November 27, 2023 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 Posted November 27, 2023 Author Posted November 27, 2023 Well, I think I reached the border, sir. Thank you for your help
Fettahaud Posted November 28, 2023 Author Posted November 28, 2023 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 ??? 93e1ad72-07eb-4ec5-814d-71c13cecca83.mp4
Toso Posted November 28, 2023 Posted November 28, 2023 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 Posted November 28, 2023 Author Posted November 28, 2023 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 Posted November 28, 2023 Posted November 28, 2023 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 Posted November 28, 2023 Author Posted November 28, 2023 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 Posted November 28, 2023 Posted November 28, 2023 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 Posted November 28, 2023 Author Posted November 28, 2023 If this is the only possible way, then I think we can make it like box C
mvaneijgen Posted November 28, 2023 Posted November 28, 2023 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. 1
Rodrigo Posted November 28, 2023 Posted November 28, 2023 Hi, Maybe this demo can provide a good starting point: See the Pen yLZMRZY by GreenSock (@GreenSock) on CodePen. Hopefully this helps. Happy Tweening! 1
Toso Posted November 29, 2023 Posted November 29, 2023 @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 Posted November 29, 2023 Author Posted November 29, 2023 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 Posted November 29, 2023 Posted November 29, 2023 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.
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now