Help with "reveal" style animation of a box with text

Ask the community
, , ,
1

Question:
I’m trying too achieve something that I thought would be quite straight forward but seem to be struggling. I have a repeater, accordion style that I want a reveal style animation, from the top down.

Product:
Wix Studio

What are you trying to achieve:
When the user clicks the “more” arrow, teh collapsed box would slide down to reveal the contents. When they click the arrow again, it would reverse the animation.

What have you already tried:
I’ve tried multiple angles on this one and I can get the desired effect but it starts from the center of the container.

Additional information:
Here is the public folder code (I plan to use this across multiple pages)

import wixAnimations from ‘wix-animations’;

const timeline = wixAnimations.timeline();

export function slideDown(element) {
if (element.collapsed) {
element.expand();
element.show();

    wixAnimations.timeline()
        .add(element, {
            scaleY: 1,
            opacity: 1,
            duration: 500, 
            easing: "easeOutQuad"
        })
        .play();
}

}

export function slideUp(element) {
if (!element.collapsed) {
element.collapse();
element.hide();

    wixAnimations.timeline()
        .add(element, {
            scaleY: 0,
            opacity: 0,
            duration: 500,
            easing: "easeInQuad"
        })
        .play()
        .onComplete(() => {
            element.collapse(); 
            element.hide();     
        });
}

}