GSAP Flip: some elements don't animate properly

[tsch0hnny]

Hello

 

I have an expandable list of items that I need to Flip.

 

I've managed to animate most elements but for some reason when one item is clicked, the others just disappear instead of fading out. Also when going back to the overview there are no animations.

 

What am I missing?

See the Pen yLPxQPm by tsch0hnny (@tsch0hnny) on CodePen

[tsch0hnny]

Ok, so the reason why there were no animations when navigating back to the overview from the detail view was because I didn't get the states of the items on the detail view and I didn't call Flip once you clicked the back arrow.

 

Silly me  GSAP's Flip Plugin is so magical that I expected literal magic 🙂 

 

Here's an updated codepen:

See the Pen OJOorKM by tsch0hnny (@tsch0hnny) on CodePen

 

Now what I still don't understand is why the inactive items are animated when navigating from detail to over-view but not the other way around...?

[GreenSock]

Welcome to the forums, @tsch0hnny. 

 

I'm pretty confused about what exactly you're trying to accomplish and why you think Flip would be useful/necessary. I'm concerned that perhaps either you don't understand what Flip is for or I'm just fuzzy on what the goal is. 

 

Do you just want to fade things in/out? If so, there's no need for Flip. Just use normal tweens. 

 

With your first post, you were toggling a class that sets visibility: "hidden" which is not tweenable, so things just disappear. As far as I can tell, GSAP and Flip were doing exactly what you're asking them to do. 

 

Here's one approach that might be more like what you're looking for (?) 

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

 

Does that help at all? 

[tsch0hnny]

Thank you Jack

 

I attached the result that I'm trying to achieve. 

 I want to animate the page title, item title and image from the first view to the second, animate in the detail information and also animate out the sibling items.

 

Sorry for the confusion, the following codepen is where I try to implement Flip:

https://codepen.io/tsch0hnny/pen/abVaRvQ
(Mobile only for now, best viewed with a width of less than 600px)

 

I wasn't aware that visibility hidden isn't tweenable. Thanks for clarifying! 

 

The pen I posted before, I made so people don't have to look through my codemess 😋

[Cassie]

Heya @tsch0hnny,

 

So, you weren't getting any animations when you clicked back because you didn't have a flip call in that event, and you weren't recording any state either. You were just changing the styling.

You have to record the state and call flip.from() in order to animate. Just like you were doing in the other event listener.

See the Pen yLPReoa?editors=0011 by GreenSock (@GreenSock) on CodePen