Sherlok

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.

Thanks, @Rodrigo

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

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

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?

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

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?

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?

Thanks @Rodrigo it works

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.

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?

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.

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

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

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