[pin the fixed section // scrollTrigger, react]

Hello,

I have the fixed section which appears on the page depending on location (using react-router). This section is fixed and located below the navbar. Then on scroll I want to move this section to the top (on the navbar place) and pin it until the page's end. 

The example is here https://codesandbox.io/s/silly-frost-qsnvqk?file=/src/FixedSection.js:490-491

Can anyone please help me to find out how to do it? I try to wrap it and then on scroll it jumps, but if assign the pin to fixRef, it jumps to the top, above navbar.

Thanks in advance.

[kill hover animation in gsap matchmedia // react]

Thanks, @Rodrigo

[kill hover animation in gsap matchmedia // react]

Hello,

The example is located here https://codesandbox.io/s/serene-lena-5o2lhi?file=/src/App.js. 

When the width suitable for desktop the hover animation plays well. But I want to turn the animation for mobile devices. So, on mobile devices I got Cannot read properties of undefined (reading 'play'). I try to reset timeline or use kill but it doesn't work for me. What is the best way to do it? 

Thanks

[scale button on click]

@GreenSock

Thanks, I just use your code and it works. I guess I should use fromTo tween and also overwrite property, because I also have hover animation.

Thanks for your help!

[scale button on click]

Hello

 

I try to scale button on click and just after doing everything in this example https://codesandbox.io/s/serene-lena-5o2lhi?file=/src/App.js, it seems to look fine. But when I copy and paste the same code into my project, the animation seems to work, but when I click and move the mouse away quickly, the animation started lagged.  When the mouse stay on button the animation looks good. So, could you please explain what is the best way to do it?

[animate the main component after loader animation]

Hello

 

The example is located here https://codesandbox.io/s/runtime-rgb-kdtvbj?file=/src/Loader.js

I want to start the animation in App component after the overlay animation. My guess is to wait until "DOMContentLoaded" or "load" but how to synchronize it? I tried to do setTimeout and also played with states using useState but it didn't work.

Appreciate any tips to get it to work right.

Thanks for your replies in advance, I got things right in my head after your help with my previous questions 

 

 

[best way to animate button on hover in react]

Thanks for your reply @Cassie

and what if have complex button with icon and I want to move icon on hover and also overlay? Should I use the same principle and don’t create the timeline inside the hover function?

 

Just modify your example 

https://codesandbox.io/s/runtime-rgb-kdtvbj?file=/src/App.js

 

Seems it works fine. Actually my main concern is not to rewrite the same animation in onMouseLeave function. So, just wondering is it ok to write in context like this?

[best way to animate button on hover in react]

Hello,

I try to do onMouseEnter and onMouseLeave animation timeline.

The example is located here https://codesandbox.io/s/serene-lena-5o2lhi?file=/src/App.js

I store my timeline in useRef and then onEnter I use currentTarget and then just create the timeline and assign it tlRef. And in onLeave function I just do the reverse.

From the first view, it seems it works fine, but when I try to hover and leave quickly and do it multiple times and the animation gets stuck.

Could you please explain where I am wrong and what is the best practice for that?

 

[gsap animation not working after fetch function]

Thanks @Rodrigo

it works

[gsap animation not working after fetch function]

Hello,

I try to implement the animation and when I have the text array in my component, the animation works well but after I got my data from API, the animation stopped working

The example is located here https://codesandbox.io/s/snowy-breeze-pk78hi?file=/src/components/Hero.js

If you replace the 

taglist.map(...)

into 

textArray.map(...)

you can see that it's started working.

Appreciate any help.

[second component doesn't have time to render]

Hello,

I have the same principle as in this example https://codesandbox.io/s/wizardly-cherry-3qep3i?file=/src/App.js except that before secondComponent I have a loooong list of divs with images. So, when I try to target the class in secondComponent the render doesn't happened yet, so the target class in second component can't be found. In this example it happened faster due to just the one div before secondComponent. So, what is the primary approach to do it?

[Routing transition jump after fetching]

Hello,

I implemented the example based on the React example with React transition group. 

https://stackblitz.com/edit/react-ehcda5?file=src%2Fcomponents%2FTransition.js

Here I have the main page with three dynamic routes and when I click I have a jump first from left and then it gets smooth. I guess that's because the data started fetching and it's broken.  How to fix it?

Actually, I have almost the same issue. I have the data fetching from contentful. When I click on dynamic route, I filtered some data and show it on the screen. The transition works fine. Then on this page, I have back button and when I clicked on it, the smooth transition doesn't work anymore. The data just disappear and only then transition happen. It's only the dynamic route issue.

[Gsap react target got undefined or not found]

@Rodrigo

Thanks for your reply.

But should I use layout hook in my click function? I mean mostly I saw that it's just playing timeline in click function and if it is without click function, it's mostly using context.

[Gsap react target got undefined or not found]

Hello

 

I try to implement the two scenes where onClick in Scene One I got the smooth transition to scene two. But already on starter, I got gsap target not found. 

Here is the https://codesandbox.io/s/quiet-wood-lzun01?file=/src/Scene1.js

 

[ScrollTrigger horizontal fadein and out effect on React]

Hello, 

I try to recreate the effect of scrolling projects in this reference.  Can you help me please to figure out how to create the fade in and fade out effects while scrolling? Codesandbox url

[Two different TL animation on hover and click // React]

Thank you very much! That's exactly what I wanted to do!

[Two different TL animation on hover and click // React]

Hello, 

Please, help me to find out how to modify the hover timeline that it works after menu close.

Link to Codesandbox

So, when you hover and leave the toggle btn animation works well. When I press the menu btn another click animation started. When I press this button again, hover timeline stop working.