balazs-d
balazs-d's Achievements
2
Reputation
-
Hi Rodrigo, I added now this line and its working as expected. const gsap = window.gsap; Thank you!
-
I did the demo and didnt get the same result. https://codesandbox.io/s/lingering-frog-4w39p?file=/src/App.js
-
I am not sure a Codepen demo will help. I am just setting up the project and there is no content now. This is how my setup looks now: - index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script </body> </html> - my App.js import "./App.css"; import CrossAnim from "./CrossAnim"; import styled from "styled-components"; import Container from "./Context/Container"; const Main = styled.div` display: grid; place-items: center; width: 100vw; height: 100vh; position: relative; `; const App = () => { const tl = gsap.timeline(); return ( <Container> <Main className="App"> <CrossAnim /> <div style={{ display: "flex", flexDirection: "row", position: "relative", zIndex: 1000, }} > <button style={{ margin: 20 }}>1</button> <button style={{ margin: 20 }}>2</button> <button style={{ margin: 20 }}>3</button> <button style={{ margin: 20 }}>4</button> </div> </Main> </Container> ); } export default App;
-
Ok, then it was another one probably. I create a demo now...
-
Hi Zach, thanks for your fast response! I already found your CodesandBox example earlier and tried to use my setup that way. If i setup this way i get the the following error: Line 58:14: 'gsap' is not defined no-undef I did use CDN for other libraries before and I thought to know how to do. This situation is a kind of weird to me, and I was sure to use it correctly.
-
Hi Everyone, my question is definitely very basic and there are already a lot of topics open but still can't solve my problem. I just want to use the Gsap CDN in React. 1. In the Public folder the index.htmml i added the following script tag into the header or into the body: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js" defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/TimelineMax.min.js"></script> 2. In a component I am trying to declare the TimelineMax. I dont import anything from Gsap like when i use NPM. const tl = new TimelineMax(); Here is already an error showing up: src/CrossAnim.js Line 60:18: 'TimelineMax' is not defined no-undef Do you have any hint please?
-
Okay, I misunderstood you. I am networking on forums and hope to find someone soon. Thank you again!
-
How does that works?
-
Unfortunately it didn't help! On some computers the animation is still laggy on others works as good as before.
-
Thank you! I try it and will let you know if the solution is working.
-
Hi People, I have some weird issues with a page I created. The animations are an important part and unfortunately its very laggy on some computers. I tested it already on 10 devices (Linux, OSX, Windows different hardware etc). Testing is kind of hard since all the computer I'm using at home for programming the application runs well. Also, the performance test seems to be good. The typical issues like using x and y instead of left and right positioning, and skew and scale instead of transform are correct. I also use canvas instead of a div. Attached is a video how it looks if it's laggy. Under the link you can open the page on Vercel and also see a short video how it looks if its laggy. I didnt created a CodePen demo yet, since it seems to refactor a lot. Maybe it's enough if I post here the code. Let me know please! I use React and Styled Components. Laggy: https://www.dropbox.com/s/o8nz4qd5emuu251/VID_20201119_155301.mp4?dl=0 Application on Vercel: https://kh-version2.vercel.app/feed Thanks in advance!
