Jump to content
Search Community

Help with GSAP, React + TransitionLink

StefanHinck test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello all I am new here and to React and GSAP. Trying to learn by building and it is proving challenging.

 

I have setup my React site using Gatsby and am using something called TransitionLinks which is suppose to be simplifying my page transition life. The example code on their Wiki is here -> https://transitionlink.tylerbarnes.ca/docs/transitionlink/

 

I copy pasted their example code into my component and see the two pages being added/removed from the dom but my shiny new GSAP function does not seem to be doing anything. Any help getting me going here would be greatly appreciate as I am so new and lost that I don't even know how to debug yet.

 

Here is what I have so far:

 

import {TweenLite, CSSPlugin, ScrollToPlugin} from "gsap/all";

 render() {
    return (
		interestingExitAnimation() {
			var exiting = document.getElementsByClassName(".tl-wrapper-status--exiting");

			TweenLite.to(exiting, 0, {opacity: 1});
		}


... in the code ...


<TransitionLink 
to="/project/"
exit={{
	trigger: ({ exit, node }) => this.interestingExitAnimation(exit, node),
		length: 2
	}}
	entry={{
		delay: 0.5
	}}
>

 

 

 

 

Link to comment
Share on other sites

Hm, I'm not personally familiar with React or Gatsby, but I wonder if your build system is applying tree shaking and dumping CSSPlugin (because it doesn't see it referenced anywhere in your code). Try referencing it somewhere, kinda like this:

import {TweenLite, CSSPlugin, ScrollToPlugin} from "gsap/all";

const plugins = [CSSPlugin, ScrollToPlugin]; //just to protect them from tree shaking

 

Does that help at all? 

 

Oh, and you don't have to do your own selecting - GSAP uses document.querySelectorAll() by default, so:

//OLD:
var exiting = document.getElementsByClassName(".tl-wrapper-status--exiting");
TweenLite.to(exiting, 1, {opacity: 1});

//NEW:
TweenLite.to(".tl-wrapper-status--exiting", 1, {opacity: 1});

 

Also, did you intend to use a duration of 0 on your tween? Seemed odd to me (no animation). 

Link to comment
Share on other sites

Thanks for the help Jack, I have not tried anything above yet but will let you know the results shortly.

 

As for the 0 duration, no that was not intentional. I saw this exact line used elsewhere and assumed that the first value must be the initial value. So:
 

0, {opacity: 1} I assumed meant, start at 0 and transition to 1.

Link to comment
Share on other sites

So after playing a bit more with it it does not appear that it was the tree shaking.

 

If I update the function to take in the two parameters and use the "node" in place of selecting the element, the transitions appear to work.

 

my function now looks like this:

 

interestingExitAnimation(exit, node) {
  console.log('triggered interestingExitAnimation()');
  console.log({exit});
  console.log({node});

  TweenLite.fromTo(node, 3, {opacity: 1}, {opacity: 0});
}

 

I am new to all of this but it seems weird to me that I cannot just call a function that queries the DOM for specific element then Tween.

 

I must be doing something wrong...

 

Link to comment
Share on other sites

@StefanHinck I had been playing around a bit with TransitionLink too. 

 

If you console.log(node) you will see that node, depending whether you are in the exit or entry context, is referencing to a whole new page (I use Gatsby, but it depends on how your components are set up). 

 

So in the exit context, node will be the current page and in the entry context it will be the new page. 

 

If you set length to a high number, you will see the div appear temporarily in your inspector

 

  • Like 1
Link to comment
Share on other sites

@flowen  yes thanks funny enough it is what I ended up doing as well and it helped a lot to see how the dom was being updated and what elements i needed to target for my desired results.

 

I am new to coding and tend to forget the little things like console.log and the dev tools.

 

Can I ask you, did you end up staying with TransitionLink or decide on something else?

Did you try out the AniLink?

 

I am using the AniLink right now and would like to slow the animation but the documentation is quite limited and I dont see anything I can use to slow it down.

Link to comment
Share on other sites

@StefanHinck

I stayed with TransitionLink because it offered me the customization I needed for my animations. Anilink doesnt and its made for some quick out-of-the-box page-transitions but not much more than that. I had a quick look in the docs and I see no support for length of the animation

 

The dev himself admits he really doesn't want you to use it :)

 

No worries, we all start somewhere. I "should" be using chrome's debugger tools after 10years of frontend but still love console.log haha

 

So:

AniLink for some quick page transitions

transitionLink for some cool custom work

Link to comment
Share on other sites

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