Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
StefanHinck

Help with GSAP, React + TransitionLink

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

 

 

 

 

Share this post


Link to post
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). 

Share this post


Link to post
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.

Share this post


Link to post
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...

 

Share this post


Link to post
Share on other sites

Ok for future newbies like myself, I finally got it to work like so:

 

interestingExitAnimation(exit, node) {
  var main = node.getElementsByClassName("main");

  TweenLite.to(main, 3, {xPercent: -50, opacity: 0.5});
}

 

  • Like 2

Share this post


Link to post
Share on other sites

Glad you got it working. Thanks for letting us know - sometimes things like this are really helpful for other folks who end up here wondering about the same question. 

 

Happy tweening!

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×