Alixsep

Hi, hope you guys are having a wonderful day! I've recently been trying to download some web-pages that use GSAP for animating some elements. for example https://www.moooi.com/eu/beauty-blooms Using CTRL + S will download the web-page but all of animations will be discarded. I have tried many many ways but none of them has worked. Any clue? Thanks! Alixsep

This is absolutely mindblowing, I am so happy that I don't need react-transition-group anymore :))) I got a question though, won't using .from method cause initial render glitch or flash? for example the whole dom might be visible before .from method sets some elements to opacity 0 also May you please add examples of transition between routes? For example when I go from homepage to about page, how to animate that? Thanks for the amazing article though, I really enjoyed it ❤️

Alright i will work on this :3 oh alright, do you know any well-written simmilar pens so i learn from them? thanks blake ??

Thanks! how can I fix the react version code in the codesandbox link? I don't know where to start honestly ?, also why are glitches happening is my react version and not happening in the codepen (non-react)?

Hi! Thanks for the amazing opportunity of members being able to ask their questions through gsap forum! It was easy for me to learn gsap using vanilla syntax (script tag in html), but using react is tricky for me. There is a CodePen and I want to implement in react.js just for practicing. This is the codepen link of my attempt: https://codesandbox.io/s/wild-architecture-ml7hh?file=/src/App.js I don't have a clue what exactly I did wrong but the glitches and the jumps are so annoying and everything is all over the place!!! Also i don't know if the original codepen author's code is correct, as far as I know I shouldn't use timeline with scrollTrigger as the gsap docs suggest. Any help in 1. Why are those glitches happening and 2. How to write the code more clean and efficient will be appreciated! Regards, ? Alixsep

This updated article is amazing! I had no clue I should have used useRef for the master timeline!!! Solved many of my annoying questions!!! <333

Hi, thank you for the rich reply! alright i get you! yes but this is the warning that was written at : (look at the end of the article) i will be happy if you explain what is going on with refs in array and gsap. Uhh, as i asked ... why is there so many useEffects in that tutorial?????? none of them has a dependency for useEffect :( Thanks so much. got you! Last time i checked it was last year. i guess i have to re-try it and give it another chance! although you are correct but i am so tired of seeing "this" keyword everywhere. also using functions will hugely decrease the mess in source code. its way cleaner... ANYWAYS Thanks so much again for the detailed reply. holy s*** you typed all that for me ❤️

Hey there! thanks so much for the greeting ?? you tagged rodrigo and osublake, should I direct message them or will they see this topic and reply? and ye, this is the part where GSAP recommends the react-transition-group library: (Scroll through it) I should mention that the codes is that link above ... are extremely outdated! As react docs suggest, we should use functional components against the class based components, but the GSAP docs used class based react code all the way up.

Hello! I am a react dev, and always wanted those flashy animations I often see on various places on internet! I joined the GSAP community because I found that this is the best animating lib, on the market hands down. although there are few stuff that are not clear to me: A ) GSAP uses actual DOM for animating while react uses virtual DOM. so the docs suggest to use Ref's but there is no detailed and up-to-date tutorial on how to do it the clean way. this is the best article I could find: (which is Greensock's promoted link) https://edidiongasikpo.com/using-gsap-scrolltrigger-plugin-in-react - Why is there many useEffects in that tutorial? and not one? - What will happen if an element gets re-rendered? will the animation break? will it restart? will it go with no-problem but looses the efficiency? What if an state change? I have no clue... - What if I have nested components? should I put each tween in each component's own useEffect? or should I put all of them in the parent and single useEffect? Should I register the plugins in each component or in parent only? - What is the issue with the useLayoutEffect? Can't I use it? no tutorial used it. (I have some components that if I use useEffect I will end up seeing super short flashy glitches, so I use useLayoutEffect) B ) For mounting/unmounting, can't I just use the GSAP? Why the hell does the docs suggest react-transition-group ??? I hate that library, always full of bugs and glitches and inconsistencies. These are the question I have for now! I will be really thankful for the people who reply, Love y'all, Alixsep