Pixelista

Woohoo, that's it! Thank you very much and now I get why those things weren't working! It even works really smooth in the Ionic / Angular project I'm working on, so again... thank you!

I made a CodePen demo for it because I really want it to look nicely. Sorry for not doing it earlier and wasting some time. Here it is: CodePen demo. As you can see I added the fading out before the positioning animation, but I don't know how to invert this when flipping it back. Also the duration of the tween is not being set correctly. How do I fix those two things? I'm sorry if I overlooked something in the documentation or the videos you mentioned but the helper function for the FLIP functionality overwhelms me a little bit and makes me feel stupid. (Can't wait for the official plugin ). I do feel like this animation is too difficult for a gsap beginner but hey, I like a challenge I hope you still want to help me!

Thank your for replying GreenSock! Well the animation I previously made was not using GSAP, so that was maybe the problem ;). I learned a lot the past days whilst researching what not to animate and why... but I'm still having some difficulties and I'm definitely looking forward to the upcoming plugin! I wanted to create my project in a Codepen, but I was having difficulties doing that as well since I still wanted it to be an Ionic + Angular project for the most realistic performance once it finished. Therefor I create a repo for it on Github which can be found here: Gsap-cart-practice. There are a couple questions here but I'll rephrase them here: How can I add more things to this timeline? What if, like in the test video, I want the height of my container to animate at the same time my cart items are animating to their end position? This isn't in the page yet where I worked with gsap (/gsap-cart) but it will be in the final version of this animation. Maybe the most important one for now: How can I make it so the text (name and price) are not visible but the image is while the items are at the bottom of the page? All while doing it in a nice animated way like in the test video. I hope I'm clear on what I'm asking and I hope one of you can help me @ZachSaucier or @GreenSock!

Hi ZachSaucier! Thank you for responding. The FLIP technique looks very promising, I can't wait until it's actually available! However I do still wonder how on earth it could be done. It's very non-trivial indeed, but I've just been playing around with a couple other ways which are very bad performance wise. I will give the helper function a try, but I wonder if I'm able to pull it off! I'll probably come back here in a few days to ask for some more help ?. Thanks for pointing me into the helper function direction!

Dear GSAP experts! I have to preface this that I’ve never tried to create an (in my eyes) advanced animation like I’m going I'm showing in the video. I’ve used GSAP before in little demo projects where I was just using it to move a single item or line to try it out but that’s about it. So I think we can conclude that I’m definitely not an expert… but I would like to create this advanced animation to wow the user! Recently I made a cool animation in Adobe XD but now I want to recreate this using GSAP if it’s even possible. I say that because I tried to create this using CSS transition but it was very clear that it won’t work as clean as it should be. I have not created a demo project to share but if that’s desired, let me know. First I want to know if it’s doable with GSAP haha test_downscaled.mov The way I went for that came the closest to the animation is by using a dummy image for each product image. The actual product is being hidden and the dummy image is shown and animates as an absolute element. I tried lots of things (animating the flex-basis, the width, trying to animate it from column to row and reverse etc) but this is the best I can do with just CSS and Angular (made in Ionic project since it will be an app). See the video of my demo actual-demo-code_zzji534j.mov I guess this is more a question if it’s even possible to recreate it using GSAP. I don’t want others to do all the work for me, but I don’t even know where to start creating this animation using GSAP. Can someone point me in the right direction or help me a little? Best regards, Pixelista!