Jump to content
Search Community

DrawSVG working only working when code recompiles.

Jaswant_1906 test
Moderator Tag

Recommended Posts

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

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

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

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

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.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 6 months later...
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!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...