GSAP Cart Problem

Question

Hi,I’ve created a shop using Webflow and Liquify, and I’ve animated the cart, mobile menu, and search using GSAP. The menu and search work perfectly, but the cart is causing some issues. When I open the cart, the animation works exactly as I want it to. However, when I close it using the X button, the cart simply fades out (which is not what I want). Interestingly, if I have the cart open and click on the empty space on the left, it closes normally with the animation.Does anyone know what could be causing this issue? Everything worked fine before the conversion.Here’s the live link: https://z4cmuv3bp7byca7v-57626296517.shopifypreview.comWebflow live link (this works): https://gooddesk-2-0.webflow.ioHere’s a demo video: https://drive.google.com/file/d/1NdNaPagceDw2DglFD4p5ouTNbGcXu4Fy/view?usp=drive_linkAnd the GSAP code is attached.Thank you so much! 🙂

marv · Answer

Hi Consti, checking 🙂

marv · Answer

It looks like this is because in Shopify you have tested it with the empty mini cart and in webflow with the full mini cart

marv · Answer

if you put a product inside the basket in shopify it also works 🙂

marv · Answer

Probably it will work if you include the empty state in your triggers too 🙂

marv · Answer

With https://www.workstatt.de/ I have used finsweet modal for the mini cart trigger, which also works really nice

marv · Answer

Let me know if this solves the issue @consti

consti · Answer

Ah i see, thanks!

consti · Answer

But I never used the Class .mini-cart_full. I only used the wrapper elements. Do you know what I need to change?

marv · Answer

checking

marv · Answer

in the empty state there is a different X Close button than the normal state

marv · Answer

so you would need to take this one also into account probably with documentQuerySelectorAll

marv · Answer

thats the reason why its working with the background, because there we use the same

marv · Answer

but the close button is not the same

marv · Answer

I am talking about this element @consti

marv · Answer

and I would remove the liquify attributes from it

consti · Answer

Thank you 🙏

marv · Answer

Is this solved @consti ?

consti · Answer

@marv yes, thank you 🙂

consti · Answer

@marv i have one question, because I can´t find that error, but when I use the Cart on the Productpage, the opacity of the inner element doesn´t work. Maybe you know what the error is, but if not, then I will find it myself - thank you very much. Here is a video: https://drive.google.com/file/d/1BkSRGJ01k0UAEs7umvCgVurFYhoI1xLJ/view?usp=sharing

marv · Answer

checking

marv · Answer

I cant find the script on the page

marv · Answer

where can I find it? 🙂

consti · Answer

This is the script file: https://cdn.shopify.com/s/files/1/0576/2629/6517/files/heading.js?v=1734969559

consti · Answer

if you search in the code for heading.js you will find it

marv · Answer

It looks like on the product page navbar_inner is always set to 1 opacity

marv · Answer

can you send me your webflow ready only link?

consti · Answer

I just saw the same 2 mins ago, but in webflow I never assigned something.. when I remove the heading.js, it doesn´t have any opacity changes... https://preview.webflow.com/preview/gooddesk-2-0?utm_medium=preview_link&utm_source=designer&utm_content=gooddesk-2-0&preview=b591d4a7ccf27c45128c1df7a9620d22&pageId=65eebb01574038784679b79d&locale=en&workflow=preview

marv · Answer

is there somewhere in a script the function where you set the opacity of navbar_inner to 0?

marv · Answer

I think one of these scripts is conflicting with gsap

marv · Answer

thats why its working on other pages, but not on product

consti · Answer

Thank you! I thought it might be a known problem, but I appreciate your support!

marv · Answer

Can you for testing take out in shopify all of these scripts and test again?

consti · Answer

I will do it and let you know

marv · Answer

ok 🙂

consti · Answer

@marv I removed all the scripts and now it´s working. So I will check these scripts

consti · Answer

Thank you a lot!

consti · Answer

I found the error. Thankyou

Welcome to the Liquify Community

GSAP Cart Problem