darkFly

Thank you, but this doesn´t help. When onReverseComplete happend and it remove class it broke whole layout. My only solution for this is make new flip animation for accoriond expanding and collapsing. There is solution: https://codepen.io/darkfly/pen/yLzOyNQ In codepen it is workig fine. But when accordion is on fullscreen and content in accordion is bigger than page, the animations are not smooth (Its better in chrome, firefox is glitching) . There is webpage: http://qminers.anafra.net/ Is there any way to optimize code? Thank you for reply

Thank you for reply My first idea was to make timeline for opening and if i want to close it, just reverse timeline. But it messed up css styles. Something like this works just fine until I want to collapse accordion. accordion.trigger.addEventListener("click", () => { let closedPanelsState = Flip.getState(panels); accordion.classList.add("expanded"); let expandAccordionTimeline = gsap.timeline(); expandAccordionTimeline.add(Flip.from(closedPanelsState)); expandAccordionTimeline.to(accordion.content, { height: "auto", }); }); I need some way to go back in its initial state. When I reverse timeline It looks same but i has this css styles: Next problem is removing class "expanded" after revesing timeline. This class is state changer for accodrion position for FLIP. https://codepen.io/darkfly/pen/wvrGvLr My next idea was to make a new timeline to collapse accoridion: if (accordion.classList.contains("expanded")) { let collapseAccordionTimeline = gsap.timeline(); collapseAccordionTimeline.to(accordion.content, { height: "0px", }); accordion.classList.remove("expanded"); collapseAccordionTimeline.add(Flip.from(closedPanelsState)); return; } It is working but animations are not smooth: https://codepen.io/darkfly/pen/yLzOyNQ

Hello, I am trying to make accordion. After clicking on accordion header, accoridon move to first positon and then expand and then scrollTo its position. After clicking on the next accordion header, the first one collapses and moves back to where it was. It is somehow working but i don't like it, I think I am doing something wrong. The animations are sometimes buggy. Would anyone be so kind as to help me? Thank you