Jump to content
Search Community

Advanced cart animation with high performance, is it possible?

Pixelista test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

 

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 

 

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

 

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! 

Link to comment
Share on other sites

Hey Pixelista. This effect is definitely doable with GSAP, though it's non-trivial as you found out :) 

 

From what you said you're using the right approach. There's actually a name for this technique called FLIP (first, last, invert, play). GreenSock is actually in development of a dedicated FLIP plugin which makes doing this sort of thing more straightforward but it's still very much in progress so I don't know if we're able to share at this time. For now there's a FLIP helper function which might help you get a better idea of how these sort of animations work. 

Link to comment
Share on other sites

21 hours ago, ZachSaucier said:

Hey Pixelista. This effect is definitely doable with GSAP, though it's non-trivial as you found out :) 

 

From what you said you're using the right approach. There's actually a name for this technique called FLIP (first, last, invert, play). GreenSock is actually in development of a dedicated FLIP plugin which makes doing this sort of thing more straightforward but it's still very much in progress so I don't know if we're able to share at this time. For now there's a FLIP helper function which might help you get a better idea of how these sort of animations work. 

 

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!

Link to comment
Share on other sites

28 minutes ago, Pixelista said:

I've just been playing around with a couple other ways which are very bad performance wise.

Can you explain more about what "other ways" you're trying and why the performance is bad? Do you have a simple demo we could look at? I'm particularly interested in your comment about things not performing well. Are the animations jerky? Is there a ton of processing necessary up front or something? Any details you could provide would be appreciated. 

 

I think you'll be surprised how easy the upcoming plugin might make this. But it's gonna take some time before we can release it, so thanks in advance for your patience. 

Link to comment
Share on other sites

20 hours ago, GreenSock said:

Can you explain more about what "other ways" you're trying and why the performance is bad? Do you have a simple demo we could look at? I'm particularly interested in your comment about things not performing well. Are the animations jerky? Is there a ton of processing necessary up front or something? Any details you could provide would be appreciated. 

 

I think you'll be surprised how easy the upcoming plugin might make this. But it's gonna take some time before we can release it, so thanks in advance for your patience. 

 

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:

  1. 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.
  2. 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!

Link to comment
Share on other sites

Unfortunately we don't really have the capacity to look through more full projects that use tools that we're unfamiliar with. That's why we ask that people make a simplified CodePen demo for posting in the forums :) The performance shouldn't be very different in CodePen vs your actual project. 

 

16 minutes ago, Pixelista said:

How can I add more things to this timeline?

You can chain tweens on timelines. Both the timeline docs and the Getting Started article cover how to do so. Perhaps also the position parameter post would be helpful.

 

18 minutes ago, Pixelista said:

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.

Fade them out? I'm not sure if I understand the problem.

Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

Unfortunately we don't really have the capacity to look through more full projects that use tools that we're unfamiliar with. That's why we ask that people make a simplified CodePen demo for posting in the forums :) The performance shouldn't be very different in CodePen vs your actual project. 

 

You can chain tweens on timelines. Both the timeline docs and the Getting Started article cover how to do so. Perhaps also the position parameter post would be helpful.

 

Fade them out? I'm not sure if I understand the problem.

 

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:

See the Pen JjKexVM by duncanteege (@duncanteege) on CodePen

.

 

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 :P). 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!

 

Link to comment
Share on other sites

  • Solution

You did well!

 

4 hours ago, Pixelista said:

I don't know how to invert this when flipping it back

You've got to keep some indication of the direction and switch the value depending on that direction. With the new FLIP plugin you might be able to do this using a second FLIP plugin depending on the circumstances. 

 

4 hours ago, Pixelista said:

the duration of the tween is not being set correctly

That's because you are attempting to set the duration in the onComplete, which will fire when the animation is over :) 

 

I met set it up this way:

See the Pen ExyGxaw?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

13 hours ago, ZachSaucier said:

You did well!

 

You've got to keep some indication of the direction and switch the value depending on that direction. With the new FLIP plugin you might be able to do this using a second FLIP plugin depending on the circumstances. 

 

That's because you are attempting to set the duration in the onComplete, which will fire when the animation is over :) 

 

I met set it up this way:

 

 

 

 

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! :D

Link to comment
Share on other sites

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...