Jump to content
Search Community

Flip with React

web_roll test
Moderator Tag

Recommended Posts

Hey,

I've been working on getting your Flip plugin working for me in a React project. I'm almost there, just wondering about a couple of things:

1. Does anyone know how to animate in and out rather than just the objects that are already in the DOM? I'm fairly new to React & have used React Transition Group with something else before, I think that might work but wondering if there is something obvious here I'm missing with the state.

2. I've commented out a couple of lines where I createRef and attach it to each item. Ideally I'd rather reference each item like this rather than Flip.getState(".item") ... It seems the more "React" way of doing it. Does anyone know if this is possible?

Apologies if this is a more React question than Gsap, feel free to send me on my way if I'm asking in the wrong place :)

See the Pen abBOxqd by web_roll (@web_roll) on CodePen

Link to comment
Share on other sites

I'm not much of a React guy. But your target for the .getState() should be the refs for all of your projects, not just the ones that are being displayed. You also need to call the .getState() right before the filter is applied and then do the .from() after the filter of your refs has been applied. Does that make sense?

 

I will continue trying to get your demo working, but you might be faster at editing your demo to work knowing that information because you use React far more than I do :) 

 

Side notes:

  • You should stick to animating transforms like x and y instead of top and left whenever possible.
  • You don't need to include the units for most of your numerical values as the defaults are usually correct. 
  • Like 1
Link to comment
Share on other sites

Me neither. I just started out with React a couple of months ago, I've been putting it off for too long! Thanks for the side notes, I've made those adjustments to the above pen. Had a lightbulb moment after reading what you wrote, but then just failed miserably 😂

Here is another pen with several comments throughout - 

See the Pen qBqqYvJ?editors=0011 by web_roll (@web_roll) on CodePen

 - I have tried to implement what you suggested.

I'll also come back to it later. Thanks for your help so far.

Link to comment
Share on other sites

Hey,

 

I created a simple example based on this CodePen from the GreenSock collection (I assume that this is what you're after).

 

Now for some reason in Codesandbox this didn't worked so I had to create a repo and publish the sample in the corresponding GitHub page.

 

This is the repo url: https://github.com/rhernandog/gsap-flip-react

Here is the meat of the code: https://github.com/rhernandog/gsap-flip-react/blob/master/src/App.js

Here is the live sample: https://rhernandog.github.io/gsap-flip-react/

 

Based on your initial post in the thread, I take that you want to remove the elements from the DOM when they're animated out and mount them back, once they're animated in. Unfortunately, for work reasons I don't have enough time to add such feature to this sample, but this should be a good starting point for it and hopefully it will help you. When I have more time in the future I hope to be able to improve this sample.

 

Happy Tweening!!!

  • Like 8
  • Thanks 2
Link to comment
Share on other sites

Thanks a lot @Rodrigo and everyone else for you time.

I took that approach (but not as simple & well written as yours) to start off with but then like you say, wanted to try mount and unmount with an animation as it seemed the more React way of doing it.

I'll have a go at doing it next week & report back if I manage to get it working.

Link to comment
Share on other sites

  • 6 months later...

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