StefanHinck

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

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

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

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.

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