How to add fade page transitions when clicking?

How to add fade page transitions when clicking?

ddai
Excursionist
22 0 2

Any way to add fade effects whenever something is clicked like shown in the top video here?

 

https://github.com/SidNewman/shopify-transitions/tree/main

Replies 2 (2)

ThePixelEdge
Shopify Partner
164 16 17

Hi @ddai ,

I have looked into the Github repo and the Libraries bieng used and its documentation , are you using dawn theme as well .

I am not sure how well versed in shopify Custom development you are , Since It won't be a small change that I could help you with here in the chat and it requires considerable Work efforts from our development end , It would entail development charges . 

If you would be Interested , Kindly reach out to us and then we can Proceed with discussions on Solution approach .

Thank you

If helpful then please Like and Accept Solution .
Buy me A Coffee

Whatsapp :- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications


Connect with Us in Our DMs | teampixeledge@gmail.com

Driver3
Shopify Partner
24 1 1

I got the GitHub page transition you linked above to work on my Shopify site using Dawn 15.0.0. But it took a lot. Right out of the box, it didn't work. Once I got it working, I ran into issues with other separate GSAP animations I created within the main content area. They stopped working once the barba.js for the page transition was initiated. The only workaround I found was to include all the GSAP animation code in my page transition barba.js file. I would like to find a better way to do it. Seems the issue is Barba. Does anyone have any ideas or know of a better way to make page transitions in Shopify?