emmme

@Rodrigo i forgot about reverting the context..! I have it in my VsCode snippet, must have written it by scratch and forgot.... haha indeed, call it in "NorthPolean" or call it in "SouthPolean" still ice it is I updated the codesanbox in order to include •Reverting •Fragment / adding each star to the fragment https://codesandbox.io/p/sandbox/nifty-voice-gnkw7w?file=%2Fsrc%2Fpages%2FHome%2Findex.jsx%3A15%2C20 but i can't make the stars appear...

Hi All! This codesandbox https://codesandbox.io/p/sandbox/nifty-voice-gnkw7w?file=%2Fsrc%2Findex.css%3A42%2C1 displays a simple Stars Background animation. Since i saw this old post talking about using a document's fragment in which to append all the stars, my question is: is it still the proper way to handle Performance, even with React ?

Perfectly, thank you!

Thank you! I'm sure this will help many others ? One question: why did you eliminated the "targets" property inside Flip.from() method , while the documentation says it is best to use it ?

I wrapped the UI into another section which has ref={gsapApp}: That really worked in order to dismiss the "Invalid scope" warnings. Unfortunately now the Flip.from() method interferes with the Lottie's first rendering, which gets delayed by the amount specified in Flip.from()'s duration option (1sec), and also it doesn't animate the transition from "flip-container" to "flip-target" into the header.. ?

Thank you @Rodrigo ! I updated the code as you suggested: https://codesandbox.io/p/sandbox/jolly-kalam-tspd3w?file=/src/pages/Home/index.jsx:21,36 I followed the steps of the FLIP acronym (inside useLayoutContext() and gsap.context() since i'm using react) : F -> First i define the state: const state = Flip.getState('.flip-container'); //btw , this produces "Invalid scope" warning in chrome dev tools, but may be related to this L -> Lastly i insert how i want the result to be: const container = document.querySelector(".flip-container"); const target = document.querySelector(".flip-target"); console.log(state) setTimeout(() => { target.appendChild(container) }, 2000); Finally , i call the Flip.from() method in order to animate the transition: Flip.from(state, { absolute:'.flip-container', targets: ".flip-container", duration: 1 }) here i call both •the absolute property (because documentation says "This solves layout challenges with flexbox, grid, etc" ) and infact the header is inside a flex; •the targets because documentation states this while using flip with a framework like react. Still the preparenting effect is not animated by the Flip. What am i missing ?

Hi all! I'm trying to figuring out how to best use GSAP with react. I'm indeed unable to put the Lottie object from its starting position to inside the header next to the title. I already implemented a context inside a useLayoutEffect , but if i try to add an absolute:true in the Gsap.from() method i get an error "TypeError: (scope || _doc).querySelectorAll is not a function" , and without it i get "Invalid scope" alert, and the Lottie doesn't move next to the title. Here is the codesandbox https://codesandbox.io/p/sandbox/jolly-kalam-tspd3w?file=/src/pages/Home/index.jsx:38,1 Thanks in advance to anyone who wishes to help!✌️

@Rodrigo thank you very much it was indeed a problem related to For what i understood it was trying to move an immovable object, right? Also, lets consider this with css again: https://codesandbox.io/s/elegant-https-f3j9sp?file=/src/components/Quote.jsx:270-494 why is the keyframe in /src/index.css rendering the animation laggy ? try to comment off useLayoutEffect in Quote.jsx

Hello everyone, I'm new here! Already fallin in love with Gsap but: Here is the codesandbox of the issue: https://codesandbox.io/s/elegant-https-f3j9sp?file=/src/components/Quote.jsx:260-484 , i suggest to "open in new window" I just ran into this bug: when i comment off the ScrollTrigger's useLayoutEffect the animation in Quote.jsx works as intend, but when i put it back on the animation gets problematically buggy... Thanks in advance! EDIT: tried to reproduce same example without css and even slimmer code: https://codesandbox.io/s/test-gsap-chiest-aiuto-b6sjko?file=/src/components/Quote.jsx:270-456 error still present: if i scroll up the section Quote.jsx is present, otherwise not Edit: i added as return of the uselayouteffect the kill function and now seems more stable albeit css animation still not working properly