Jump to content
Search Community

Accordion using Flip doesn't behave as expected

evomedia.lt test
Moderator Tag

Recommended Posts

Hello!

I'm trying to make an accordion for a FAQ with some interesting border decorations. Animating it with pure CSS transitions technically works, but I wanted a smoother animation. Thus, I tried using Flip. However, if you will try going through different elements in codepen example you will notice that the accordion doesn't act as it should - the items jump around, even though it should be just an element height animation.

In this case I used max-height to change the item size because it's the only way it can be animated via pure CSS transitions since height alone can't animate between size in pixels and auto (I tried height with Flip, same result).

 

To see how it works with pure css (which is my desired way of movement) just comment out the Flip line from the JavaScript portion and uncomment the transition in .faq-item-container in CSS.

 

This is what I'm getting with Flip when trying to jump between the items.

chrome_BPaCC0qKxR.png.390091f7755eac753c76078e205fe1b1.png

 

Any advice would be appreciated :)

See the Pen vYpyRPd by driezis (@driezis) on CodePen

Link to comment
Share on other sites

38 minutes ago, OSUblake said:

It looks more like a CSS issue due to the way you have the borders set up in a container that is only 50% wide.

Well, to check that theory I made a codepen sample with GSAP animation alone, animating item heights, and there are no such anomalies appearing in the animation. However, it's a given, that gsap can't know the "auto" size, so I just use fixed pixel height, but it still shows that borders don't misbehave if only the height of the element animates... In the css only the height changes so I assumed that Flip would recognize it and only animated that...

 

See the Pen dyJOKdb by driezis (@driezis) on CodePen

Link to comment
Share on other sites

@OSUblake is there a way to tell Flip.getState() to only record the "height" changes in the state?

 

It is weird, however, because in the documentation it clearly states that with or without props param set in getState it always records state of 

Quote

 transforms (like x, y, scaleX, scaleY, rotation, skewX), width, height, and opacity.

and since there are no transforms in my CSS and only height changes there should be no jumping action whatsoever (as proven by a plain GSAP codepen sketch).

Link to comment
Share on other sites

6 hours ago, OSUblake said:

Flip works fine for accordions, I just don't understand your pen.

I understand that, but what I don't understand is why it doesn't work with my setup. I mean it's pretty straight forward - .faq-item-container listens to clicks and is 100px height by default. On click it gets an .active class which sets height to auto.

Everything else in there is just content and fancy borders inside of that .faq-item-container and if I only animate that with vanilla css or GSAP it works flawlessly.

EDIT: My initial example uses max-height instead of height to be able to jump between Flip and pure CSS transitions for comparison. However the results are the same if using max-height or height in Flip.

 

I'm trying to understand how Flip interprets it... Does it record the properties(state) of the selected objects alone or does it take all the nested elements inside of it as well? If it's just a selector properties alone it should act like my pure GSAP solution where it smoothly changes heights from one to another. But apparently there's something deeper going on, and I'm trying to figure out what, because I thought I'm using Flip in the same way that your examples use it, however the borders and item positions themselves jump around when it's in Flip, and yet work perfectly well in GSAP.

 

If it's some sort of error on my side of styling it, that's ok, I just want to know why it doesn't work so I can avoid it in the future.

Edited by evomedia.lt
Added comment about initial codepen that uses max-height instead of height
Link to comment
Share on other sites

14 minutes ago, evomedia.lt said:

But apparently there's something deeper going on, and I'm trying to figure out what, because I thought I'm using Flip in the same way that your examples use it, however the borders and item positions themselves jump around when it's in Flip, and yet work perfectly well in GSAP.

 

You have a complicated structure, with a bunch of flex stuff, which the docs state that you need to use absolute: true for.

 

Quote

Boolean | String | Array | NodeList | Element - specifies which of the targets should have position: absolute applied during the course of the FLIP animation. If true, all of the targets are affected, or use selector text like ".box" (or an Array/NodeList of Elements, or even a single Element) to specify a subset of the targets. This can solve layout challenges with flex and grid layouts, for example. If things aren't behaving in a seamless way, try setting absolute: true. Beware, that position: absolute removes the elements from document flow, so things below can collapse. In that case, just define a subset that doesn't include the container element so it props the layout open. (added in 3.9.0)

 

  • Like 1
Link to comment
Share on other sites

  • 5 months later...

This works great for what I want

See the Pen pormXeP by GreenSock (@GreenSock) on CodePen

What I want to do is add a timeline animation when opening an item.  So I can fade or slide elements in. This older CodePen illustrates the effect I'm after:

See the Pen YQyQWq by GreenSock (@GreenSock) on CodePen

So far I've failed miserably to get anywhere.  Could someone point me in the right direction?

 

Link to comment
Share on other sites

If you've given it a shot, please provide that as a minimal demo so we can take a peek at the problem in context? I think that'll significantly increase your chances of getting a solid answer. 👍

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

Link to comment
Share on other sites

Thanks.  I've been looking at this forum for years but never knew how easy it was to add Pens.  Since I posted I've worked it out, sort of.  I spent far too long trying to add the Timeline to the forEach loop, rather than the toggleMenu function.  Also It has struck me I was thread hijacking so started a new one:

 

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...