smooth transitions to collapsible rows in the Dawn theme

LuxSamples
Tourist
12 0 2

I tried tutorials, chat gpt, coding but nothing work for me.

 

im trying to do transition animation like this website:(above the footer)
https://aromatica-il.com

 

but im failing evrery time! not sure what to do.

 

my website: my website 

password: tiskau

 

thanks so much for help!!!

Replies 5 (5)

PaulNewton
Shopify Partner
6339 579 1349

The example is using a lot of animations in the Motion theme in it's theme.css file and your not specific about which animation is relevant.

Nor have you provided a reference to your work so far.

Doing all those animations is hundreds of lines of code and is beyond the scope of a single question in a forum post.


Either narrow the scope of the question and improve detail or hire someone as it is an advanced customization.

 

If you have the budget and need this customization built you can contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


LuxSamples
Tourist
12 0 2

you right!!

im talking about the collapsible content, im mean when i click on each row i would like to get:
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease-out;

 

but the css effect not worked even when i tried to add javascript, this kind of animation is very easy but i cant get the right class!

 

btw when i used js i wrote:

document.addEventListener("DOMContentLoaded", function() {
const triggers = document.querySelectorAll(".collapsible-trigger");
triggers.forEach(trigger => {
trigger.addEventListener("click", function() {
const content = this.nextElementSibling;
this.classList.toggle("is-open");
content.style.display === "block" ? content.style.display = "none" : content.style.display = "block";
});
});
});

 




 

LuxSamples_0-1714779986105.png

(trying to get smooth transition)

LuxSamples
Tourist
12 0 2

nope, locally

LuxSamples
Tourist
12 0 2

why?

LuxSamples
Tourist
12 0 2

why do you want to place order if i dont selling nothing?