How to add animation on mobile?

[CreatorTim]

Hi, does anyone know how to add a smooth animation for sliding up the response in collapsible content on MOBILE?

I have already added the animation, but it works only on desktop, so how can I add a similar one for mobile?

Here is my store: https://1049xn-ya.myshopify.com/products/editing-masterclass
(Just scroll all the way down, that’s where the collapsible content is.)

And here is a store where it works even on mobile: https://tomnoske.store/products/cinema-luts
(Just scroll all the way down, that’s where the collapsible content is.)

As I said, I need it only on mobile!

Thanks a lot,
Tim

[mageplaza-cs]

Hi @CreatorTim,

I am from Mageplaza - Shopify solution expert.

I have researched the two websites you provided. The difference between the animations lies in the transitions for the inner content. You can enhance this by adding custom CSS rules.

details .accordion__content {
    will-change: transform;
    transform: translateY(25px);
    transition: transform .5s ease;
}
details[open] .accordion__content{
   transform: translateY(0);
}

Please leave a comment if it functions as you expected. 🙂

[CreatorTim]

Hey, thanks for the feedback, it looks good, but it only works on desktop. I want it to work on mobile too—how can I do that?

Here's the full code for the collapsible content:

.accordion details::details-content {

display: block;

margin-inline: 2rem;

block-size: 0;

overflow: hidden;

transition-property: block-size, content-visibility;

transition-duration: 0.3s;

transition-behavior: allow-discrete;

transition-timing-function: ease-out;

}

.accordion details[open]::details-content {

block-size: auto;

block-size: calc-size(auto, size);

}

details .accordion__content {

    will-change: transform;

    transform: translateY(25px);

    transition: transform .5s ease;

}

details[open] .accordion__content{

   transform: translateY(0);

}

Thanks a lot,
Tim

[mageplaza-cs]

Hi, Tim

I cannot determine the difference in transition between the desktop and mobile viewports. You can refer to this video for reference.

I also reviewed your CSS file, and the animation rules are not enclosed within a @media tag, which means they apply to all viewports. Am I misunderstanding your explanation? Could you please clarify what is functioning on the desktop viewport but not on mobile?

Best regards.

[CreatorTim]

Hey, I know what you mean. When you view the store with mobile dimensions on a desktop, the animation works, but when you open the store on an actual mobile device, the animation doesn’t work.

I also noticed that the animation works when I use the mobile preview in Shopify's editor, but it just doesn’t work on a real mobile device.

Check it out on a real mobile device, and you’ll see it’s not working.

[mageplaza-cs]

Hi @CreatorTim,

I understand your point. Based on my research, the issue might be caused by inappropriate CSS rules for mobile devices. I checked on both iOS and Android devices, and none of them worked. However, I couldn't identify the CSS rule that controls the expand/collapse behavior for the card (there seems to be no transition for .accordion; it might be controlled by JavaScript?). Here's an updated transition for the inner content:

details[open] .accordion__content {
    transform: translateY(0);
    opacity: 1; /* Ensure smooth visibility */
}

details .accordion__content {
    will-change: transform, opacity; /* Optimize for mobile hardware acceleration */
    transform: translateY(25px);
    opacity: 0; /* Start with hidden content */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Combine transitions for smoother animation */
}

Best regards.