Jaswant_1906 Posted June 16, 2022 Share Posted June 16, 2022 I am new to web dev and so to gsap plugins. The drawSVG didn't seem to work. Then i removed drawsvg:0 and the code recompiled , I could see my logo and then I added drawSVG: 1 and the code recompiled and the animation was visible and then when I reloaded the animation was gone as well as the entire svg . I have attached my code files . please have a look. import './index.scss' import LogoV from '../../../assets/images/logo-v5.png' import { useEffect, useRef } from 'react'; import gsap from 'gsap-trial'; import { DrawSVGPlugin } from 'gsap-trial/dist/DrawSVGPlugin'; const Logo = () => { const bgRef = useRef(); const outlineLogoRef = useRef(); const solidLogoRef = useRef(); useEffect(() => { gsap.registerPlugin(DrawSVGPlugin) gsap .timeline() .to(bgRef.current, { duration: 1, opacity: 1 }) .from(outlineLogoRef.current, { drawSVG: 0, duration: 20 }) }, []) return ( <div className="logo-container" ref={bgRef}> <img ref={solidLogoRef} className="solid-logo" src={LogoV} alt="V" /> <svg width="700pt" height="900pt" version="1.0" viewBox="-20 -900 1000 1400" xmlns="http://www.w3.org/2000/svg" > <g className="svg-container" transform="translate(-50 420) scale(.1 -.1)" fill="none" > <path ref={outlineLogoRef} d="M5210.8,1.1l-5210,10270h1590l3690-7130l2950,5800l-576.1-17.5l-83.9-2.5h-1710l350-900l-930-1650l-1480,3900h6700L5210.8,1.1z M10501.3,10270.9l0.4,0.7H3800.1l0.3-0.7l1480-3900l0.4-1l0.5,0.9l930,1650l0.1,0.2l-349.8,899.5h1709.3l659.2,20L5280.8,3142.2l-3689.6,7129.1l-0.1,0.3H0l0.4-0.7l5210-10270l0.4-0.9L10501.3,10270.9z M1590.5,10270.6l3689.9-7129.7l0.4-0.9l2950.4,5800.9l0.4,0.8l-660.8-20H5860.1l0.3-0.7l349.9-899.8l-929.4-1648.9l-1479.4,3898.3H10500L5210.8,2.2L1.6,10270.6H1590.5z" strokeWidth="4px" stroke="rgba(0, 255, 81, 0.57)" /> </g> </svg> </div> ) } export default Logo SCSS .logo-container{ z-index: 0; width: 500px; height: 620px; position: absolute; top: 0; right: 15%; bottom: 0; left: auto; margin: auto; svg{ width: 100%; height: auto; bottom: 0; transform: rotateZ(30deg) !important; } .solid-logo { position: absolute; top: auto; right: auto; bottom: auto; left: 0; margin: auto; width: 100%; opacity: 0; transform: rotateZ(30deg); z-index: 1; } } .svg-container { stroke: rgba(0, 255, 81, 0.57); stroke-width: 4px; } Link to comment Share on other sites More sharing options...
GSAP Helper Posted June 16, 2022 Share Posted June 16, 2022 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
Cassie Posted June 16, 2022 Share Posted June 16, 2022 Hey there! Seems to be working here, maybe we can work up from this point? Also - a little note that it looks like your path is a compound path which can cause strange results (like taking 20 seconds to complete the animation) See the Pen PoQLmqj?editors=0110 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted June 16, 2022 Share Posted June 16, 2022 https://community.adobe.com/t5/illustrator-discussions/turn-compound-path-back-into-a-path/m-p/3234775#:~:text=To release a compound path,before making the compound path. Link to comment Share on other sites More sharing options...
Jaswant_1906 Posted June 16, 2022 Author Share Posted June 16, 2022 29 minutes ago, Cassie said: Hey there! Seems to be working here, maybe we can work up from this point? Also - a little note that it looks like your path is a compound path which can cause strange results (like taking 20 seconds to complete the animation) Thank you so much . Well it is working in VS Code as well BUT it works only when the code recompiles from the stage where the outline is already visible. When i reload the animation nor the outline logo is visible. and it also doesnt work when the code recompiles when the outline is not visible. Here is what happens.. I remove drawSVG, and refresh..the outline logo appears and then I add drawSVG back and then I dont reload the animation is working now. when i reload, everything is gone then. Link to comment Share on other sites More sharing options...
GSAP Helper Posted June 16, 2022 Share Posted June 16, 2022 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that clearly demonstrates the issue? Please don't include your whole project. Just some colored <path> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. @Cassie already provided a demo that you could fork if you'd like. We just need to be able to reproduce the issue you're talking about. If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo with reproducible results, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
GSAP Helper Posted June 16, 2022 Share Posted June 16, 2022 One more thing...I noticed you're using a "from()" tween. You may be running into the React 18 issue that runs in "strict" mode locally by default which causes your useEffect() to get called TWICE! Very annoying. It has caused a lot of headaches for a lot of people outside the GSAP community too. .from() tweens use the CURRENT value as the destination and it renders immediately the value you set in the tween, so when it's called the first time it'd work great but if you call it twice, it ends up animating from the from value (no animation). It's not a GSAP bug - it's a logic thing. For example, let's say el.x is 0 and you do this: useEffect(() => { // what happens if this gets called twice? gsap.from(el, {x: 100}) }, []); The first time makes el.x jump immediately to 100 and start animating backwards toward the current value which is 0 (so 100 --> 0). But the second time, it would jump to 100 (same) and animate back to the current value which is now 100 (100 --> 100)! See the issue? So you can either turn off strict mode in React or you can add some conditional logic to your useEffect() call so that it only runs ONCE. Sorta like: const didAnimate = useRef(false); useEffect(() => { // if we already ran this once, skip! if (didAnimate.current) { return; } // otherwise, record that we're running it now and continue... didAnimate.current = true; gsap.from(el, {x: 100}); }, []); Or you could just use .fromTo() tweens so that you define both the start and end values. One of the React team members chimed in here if you'd like more background. 1 1 Link to comment Share on other sites More sharing options...
fuhuahu Posted January 9, 2023 Share Posted January 9, 2023 On 6/17/2022 at 2:03 AM, GSAP Helper said: One more thing...I noticed you're using a "from()" tween. You may be running into the React 18 issue that runs in "strict" mode locally by default which causes your useEffect() to get called TWICE! Very annoying. It has caused a lot of headaches for a lot of people outside the GSAP community too. .from() tweens use the CURRENT value as the destination and it renders immediately the value you set in the tween, so when it's called the first time it'd work great but if you call it twice, it ends up animating from the from value (no animation). It's not a GSAP bug - it's a logic thing. For example, let's say el.x is 0 and you do this: useEffect(() => { // what happens if this gets called twice? gsap.from(el, {x: 100}) }, []); The first time makes el.x jump immediately to 100 and start animating backwards toward the current value which is 0 (so 100 --> 0). But the second time, it would jump to 100 (same) and animate back to the current value which is now 100 (100 --> 100)! See the issue? So you can either turn off strict mode in React or you can add some conditional logic to your useEffect() call so that it only runs ONCE. Sorta like: const didAnimate = useRef(false); useEffect(() => { // if we already ran this once, skip! if (didAnimate.current) { return; } // otherwise, record that we're running it now and continue... didAnimate.current = true; gsap.from(el, {x: 100}); }, []); Or you could just use .fromTo() tweens so that you define both the start and end values. One of the React team members chimed in here if you'd like more background. Nothing can express my appreciation to you, this same issue has tortured me all night long, you are my hero! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted January 9, 2023 Share Posted January 9, 2023 Glad it helped, @fuhuahu. But since the original post, we released 3.11 that includes gsap.context() which solves all of this very easily because it gives you a way to do cleanup for all your GSAP/ScrollTrigger stuff in one fell swoop. It's your new best friend in React. Also, I'd strongly recommend reading this article: Enjoy! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now