Jump to content
Search Community

More FLIP! (Scaling issue)

NickWoodward test
Moderator Tag

Recommended Posts

Hi,

 

Just remove the scale configuration option from the flip instance:

 

Also there is a logic issue when you click the enlarged card, so you'll have to take a better look at that:

const card = e.target.closest('.job__card'); // <- returns null
const content = card.querySelector('.job__content'); // <- throws an error

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Hi,

 

I believe that the issue comes from the way you're re-ordering the cards after the first animation and the styling you're applying here. For example you start with a Backend Developer selected:

0fnFpMO.png

If I click on the last Junior Legal Counsel one (that's only half visible) I'd expect those to be flipped but here is the result:

8JTmWcp.png

Also as you can see there is a problem with the gap between the first and second element.

 

If I was you I'd take a step back and completely remove Flip from this and get this working with reparenting and classes, no animations whatsoever and then plug Flip back in for the animations.

 

Happy Tweening!

Link to comment
Share on other sites

8 minutes ago, Rodrigo said:

Hi,

 

I believe that the issue comes from the way you're re-ordering the cards after the first animation and the styling you're applying here. For example you start with a Backend Developer selected:

0fnFpMO.png

If I click on the last Junior Legal Counsel one (that's only half visible) I'd expect those to be flipped but here is the result:

8JTmWcp.png

Also as you can see there is a problem with the gap between the first and second element.

 

If I was you I'd take a step back and completely remove Flip from this and get this working with reparenting and classes, no animations whatsoever and then plug Flip back in for the animations.

 

Happy Tweening!


That is exactly what I'm doing now :)

But yeah, unfortunately that was me being an idiot and not forking the pen and trying to fix the problem, sorry. If you look at it now (I've reinstated the original) you should see the issue without that weird gap between the first and second element, but you're right, I'm stripping the forked demo right back until i properly understand it
 

Link to comment
Share on other sites

Hi,

 

Whenever there this extra gap between the elements in the list, the glitch happens (between the first and second element in the list in the case of the image):

fUwGiYm.png

 

You have to find out how that gets there. If I was you I would move the summary element from the list. Also you have a bunch of <li> elements nested inside a <div> and not a <ul>, why? I don't know if that could be creating this, but that's definitely quite odd. Create a <ul> for the <li> elements and keep the summary apart from those and don't use gap between the summary and the <ul>, give the summary a margin bottom to create separation.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

24 minutes ago, NickWoodward said:

Chain it to the Flip animation?

Yep, keep in mind that a Flip.from() instance returns a GSAP Timeline:

https://greensock.com/docs/v3/Plugins/Flip/static.from()

 

Just be careful with the position of the other animations and if they overlap with the first instance created by the Flip.from() method remember to avoid animating the same property to avoid conflicts and weird results.

 

Happy Tweening!

Link to comment
Share on other sites

3 minutes ago, Rodrigo said:

Just be careful with the position of the other animations and if they overlap with the first instance created by the Flip.from() method remember to avoid animating the same property to avoid conflicts and weird results.

ok, nice, although no chance of getting the animations to overlap

 

Flip.from(state, {
	duration: 0.6,
	ease: "power1.inOut"
}).to(currentDescription, { autoAlpha:1, display: 'block' }, '<');

seems to wait before it runs the 2nd animation. was hoping to get it to open the description div as the element was transitioning

Link to comment
Share on other sites

There are two problems I see: 

  1. You're using "<" as the position parameter which just means "the start of whatever the most recent thing added to the timeline" and Flip puts a call() at the very end, thus "<" is effectively the very end of the timeline in this case. If you want it to start at the beginning of the timeline, you can simply use 0 (zero) as the position parameter.
  2. But if you do that, you're actually animating the height of a child element which contaminates the height of the parent element that you're doing the flip on! You're supposed to capture the current state (good), then set the final state (BAD - you're child height isn't at the final value, and since it affects the parent, it's throwing the calculations off), and then have Flip do its magic "from()" (good). So Flip calculates the final height to be a certain value...but you simultaneously run a tween of a child that's altering the final height. See the problem? 

Perhaps this is what you were looking for?: 

See the Pen mdGwbMN?editors=1010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

1) Ah that makes sense, thanks

 

2)

12 hours ago, GreenSock said:

But if you do that, you're actually animating the height of a child element which contaminates the height of the parent element that you're doing the flip on! You're supposed to capture the current state (good), then set the final state (BAD - you're child height isn't at the final value, and since it affects the parent, it's throwing the calculations off), and then have Flip do its magic "from()" (good). So Flip calculates the final height to be a certain value...but you simultaneously run a tween of a child that's altering the final height. See the problem? 


I do, that's really interesting and I don't think I would've got close to working that out on my own so thanks!


The animation is now definitely closer to what I want, but I think there's still something up with the height of the description box at the beginning of the animation (both when closing and opening). You can see the description jumps to a size larger than its content when closing, and expands past the size needed then shrinks when opening. I've given the desc a bg colour and slowed down the animation to make it more obvious.

I've spent a fair amount of time trying to fix it, but ultimately the problem is that I don't know what's causing that jump. I initially thought it was the text wrapping, but then saw that the containing div was jumping too.

See the Pen YzOQZWx?editors=1010 by nwoodward (@nwoodward) on CodePen

Link to comment
Share on other sites

That's because due to your CSS, the height: "auto" ends up being totally different when its container is expanded vs. when it's contracted. This is quite an edge case, but you can pretty easily work around it like this: 

See the Pen MWqodgy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Basically, measure it at the proper spot and plug that into your tween. 

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