Jump to content
Search Community

react transition group

Ahmed Elabbasy test
Moderator Tag

Recommended Posts

Hi,

 

Actually I don't see any GSAP code in the code you're posting. In fact You're using TransitionGroup and CSSTransition. CSS Transition uses CSS animations and not GSAP. Also in GreenSock land that is as close to a mortal sin as you can get :D:D

 

The code pattern to create animated routes using GSAP is  to wrap the component passed to the <Route  /> one, with the <Transition /> component. Then use the <Transition /> component's API to create the GSAP instances for the animations, as well as the show prop in order to indicate if the component is on it's way in or out, and make the GSAP animations according to that.

 

Here is a live sample using the approach mentioned above, just take a look at the routes.js and components.js files and you'll see how it can be done:

 

https://stackblitz.com/edit/gsap-react-route-animation?file=index.js

 

I'll try to create an up-to-date sample during the next week and see if that code still works with the latest versions of react router and transition group, although by just looking at the API docs in both packages I don't see any breaking changes so the code in the sample should still work.

 

Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

5 minutes ago, Rodrigo said:

Hi,

 

Actually I don't see any GSAP code in the code you're posting. In fact You're using TransitionGroup and CSSTransition. CSS Transition uses CSS animations and not GSAP. Also in GreenSock land that is as close to a mortal sin as you can get :D:D

 

The code pattern to create animated routes using GSAP is  to wrap the component passed to the <Route  /> one, with the <Transition /> component. Then use the <Transition /> component's API to create the GSAP instances for the animations, as well as the show prop in order to indicate if the component is on it's way in or out, and make the GSAP animations according to that.

 

Here is a live sample using the approach mentioned above, just take a look at the routes.js and components.js files and you'll see how it can be done:

 

https://stackblitz.com/edit/gsap-react-route-animation?file=index.js

 

I'll try to create an up-to-date sample during the next week and see if that code still works with the latest versions of, although by just looking at the API docs in both packages I don't see any breaking changes so the code in the sample should still work.

 

Happy Tweening!!!

Sorry about this I was a little hasty

This is the same example here but it also does not work

erro3.png

error5.png

Link to comment
Share on other sites

55 minutes ago, Rodrigo said:

Mhhh.... I don't see anything wrong in the code.

 

Can you provide a live-reduced sample that has only the code that is giving you problems so we can take a look at it?

 

Feel free to use either stackblitz or codesandbox for it.

 

Happy Tweening!!!

it was a silly problem

Here I saw people who have great opinions and help people. This pushed me to put the problem in a hurry .. Thanks for your time

  • Like 1
Link to comment
Share on other sites

3 hours ago, Ahmed Elabbasy said:

Here I saw people who have great opinions and help people. This pushed me to put the problem in a hurry .. Thanks for your time

You're welcome and thanks for the kind words. We're here to help as much as possible, that's the main spirit of the GreenSock community :)

2 hours ago, Ahmed Elabbasy said:

I want to add a scale in the page entry but when I do that it disappears and when I do like the previous example some components move and remain that way

Again can you provide a live sample, you can even create a codepen sample of the animation(s) you want to add to the routes transitions in order to see what could be the problem. Please refer to this post by @Carl for that:

 

 

Happy Tweening!!!

  • Like 4
Link to comment
Share on other sites

Hi,

 

The issue is actually in how you're adding the config variables to the GSAP instances. Basically you're doing it backwards. Right now your code looks like this:

 

TweenLite.to(node, 0.8, {
  autoAlpha: props.show ? 0 : 0.9,
  scale: props.show ? 0 : 1.5,
  onComplete: done
});

That basically means that if the show prop is true, which means the component is entering the app and should be animated in, the opacity is going from the current value to zero, so at the end of the animation it won't be visible. Same thing with the scale, the animation is going from the current scale value to zero, so the element size is zero at the end. Since your initial values are these:  const startState = { autoAlpha: 0, scale: 1.1 }; your component goes from opacity zero to zero and scale 1.1 to zero.

 

Perhaps this configuration is closer to what you're looking for:

 

TweenMax.to(node, 0.8, {
  autoAlpha: props.show ? 1 : 0,
  scale: props.show ? 1 : 1.5,
  onComplete: done
});

Happy Tweening!!!

  • Like 4
Link to comment
Share on other sites

4 minutes ago, Rodrigo said:

Hi,

 

The issue is actually in how you're adding the config variables to the GSAP instances. Basically you're doing it backwards. Right now your code looks like this:

 


TweenLite.to(node, 0.8, {
  autoAlpha: props.show ? 0 : 0.9,
  scale: props.show ? 0 : 1.5,
  onComplete: done
});

That basically means that if the show prop is true, which means the component is entering the app and should be animated in, the opacity is going from the current value to zero, so at the end of the animation it won't be visible. Same thing with the scale, the animation is going from the current scale value to zero, so the element size is zero at the end. Since your initial values are these:  const startState = { autoAlpha: 0, scale: 1.1 }; your component goes from opacity zero to zero and scale 1.1 to zero.

 

Perhaps this configuration is closer to what you're looking for:

 


TweenMax.to(node, 0.8, {
  autoAlpha: props.show ? 1 : 0,
  scale: props.show ? 1 : 1.5,
  onComplete: done
});

Happy Tweening!!!

I swear I did it this way but it works now
But I did not look at autoAlpha
Maybe I should learn GSAP well

Thank you
Sorry for your time

  • Like 1
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...