Jump to content
Search Community

GSAP Accordion with FLIP

darkFly test
Moderator Tag

Recommended Posts

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

See the Pen eYGJbmo by darkfly (@darkfly) on CodePen

Link to comment
Share on other sites

Welcome to the forums @darkFly

 

I'm having a hard time following your code. Like why are doing 2 Flips on the same state?

 

Flip.from(closedPanelsState, {
  duration: 0.5,
  onComplete: () => {
    accordion.classList.toggle("expanded");
    Flip.from(closedPanelsState, {})
  }
})

 

I think it would be a lot easier to understand if you refactored it into a timeline so you didn't have so many onComplete callbacks. Flip returns a timeline so you can add to that...

 

Flip.from(state)
  .to(".foo", {})

 

of add a Flip to a timeline.

 

gsap.timeline()
  .to(".foo", {})
  .add(Flip.from(state))

 

Link to comment
Share on other sites

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: image.png.6c7a9418f7ddabe91e3ccdee2e64db8f.png

Next problem is removing class "expanded" after revesing timeline. This class is state changer for accodrion position for FLIP. 

See the Pen wvrGvLr by darkfly (@darkfly) on CodePen

 

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: 

See the Pen yLzOyNQ?editors=0010 by darkfly (@darkfly) on CodePen

 

 

 

Link to comment
Share on other sites

On 12/7/2021 at 5:40 PM, OSUblake said:

You could probably use the onReverseComplete callback to remove the class.

 

gsap.timeline({
  onReverseComplete: () =>accordion.classList.remove("expanded")
})

 

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: 

See the Pen yLzOyNQ by darkfly (@darkfly) on CodePen

 

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 

Link to comment
Share on other sites

Normally I would say to add will-change: transform; in your CSS to elements you are animating, but that's creating some gaps in Firefox. I guess you could hide those gaps with some pseudo elements so the panels have a slight overlap. I would also add overflow-y: scroll to the body so the scrollbar doesn't cause the layout to shift on Windows.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...