Animate all boxes to one pile with gsap flip

[battleaxe10000]

Hello,

Starting with. I'm not a superman with codepen, but I've done my best to give an example of what I'm trying to accomplish.

I use react, and it's intentional because there are some differences in how you do things if you use js vs react.

 

The idea is to animate a bunch of elements (when you click on a box), from their absolute positions, to a pile (like a deck of cards). Right now the boxes I use are moving from point a to point b as they should, but there is no animation.

 

1. So, my first question is, what do I do wrong and how do I fix this? Should I use fixed positions for the innerwrappers, or how do you get them positioned over eachother? (the boxes should only more from scattered to center).

2. The second question is how to get the clicked box at the top of the deck. I'm considering using a class name on it (as active), and then just adding a higher z-index to that class name. Would you suggest anything else?

 

I would really like to understand what is going on and how to work with this, so if you have the time and energy to give some kind of explanation I would be super grateful.

 

Anyway, thank you so much for your time.

See the Pen vYdQXZm?editors=0110 by battleaxe (@battleaxe) on CodePen

[Cassie]

Hey there! So. You're targeting elements with a class of '.box' and there's no class of '.box' in your demo.

Just a little note for you and also for future people putting demos together. This is why we ask for simplified demos with vanilla JS.

This would have taken me a couple of seconds to spot in a vanilla JS demo, but because you're using React, and there are references to 'box' in your code, I went through these following steps before realising...

• Swopped the reference to class to refs
• Targeted descendant elements with gsap.utils.selector
• Tried useLayoutEffect instead of useEffect
• Double checked when the functions were rendering and what they were returning
• Checked if the elements were being moved around or entirely re-rendered
• Added data-flip ID's so Flip can keep track of them even if they get deleted and re-rendered.

Still nothing.

I double checked our react article a few times and compared to several other working Flip demos.
Half an hour later I realised it was just trying to target a class that didn't exist and felt like a total banana for not checking that earlier.

I'm very happy we managed to get this sorted, but in future, I implore everyone. Vanilla demos. A great bugfixing step is to see if you can get it working with a couple of coloured boxes and a few lines of vanilla JS first. Then layer the complexity in until it breaks.

Shouting into the void here, but maybe it'll save someone some bug-hunting time in future.

Here's a working demo though, we got there. Good luck with your project!

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

[battleaxe10000]

@Cassie

First off. Thank you so very much for your help. I really do appreciate your time and all your effort.

Thank you very much for the react-link too.

 

For my defence regarding the react part, I did write on the third row in my question:

"I use react, and it's intentional because there are some differences in how you do things if you use js vs react.".

I did this trying to make sure that the reader would understand that this was related to react. I appologize if it was unclear despite that.

 

A problem, that I have seen more people having, is the convertion part between vanilla js and react. How do those of us, that could need some guidence here, ask questions that are gsap/react-related without causing too much trouble for those reading our question?

 

Thanks again 💐

[Cassie]

I understand that, and we appreciate you building the demo out. 

 

But the problem here wasn't to do with React, you just hadn't added the correct class onto your Element.

 

You were targeting '.box'

Your elements - 

 

<div data-flip-id="2" id="box2" class="boxWrapper boxWrapper1">
  <div class="boxItem">2</div>
</div>

Vanilla JS makes it much easier to spot small issues like this. e.g.

See the Pen ExQOmqE?editors=1011 by GreenSock (@GreenSock) on CodePen

 

3 hours ago, battleaxe10000 said:

A problem, that I have seen more people having, is the convertion part between vanilla js and react. How do those of us, that could need some guidence here, ask questions that are gsap/react-related without causing too much trouble for those reading our question?

Debugging is all about working out where the issue lies. The best way to do that is by stripping the demo back or starting from scratch.

First step in debugging should ideally be - Can I simplify this down to the basics and make this work without React?

[Cassie]

If you try build it in vanilla JS and it works, then try in React and if it doesn't then that's great - then you know for sure that it's a React issue.

Then we know where the problem lies. 

Hope this helps for future. Don't worry about it too much though. We got there and it works and that's the important thing!