[DrawSVG working only working when code recompiles.]

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.

[DrawSVG working only working when code recompiles.]

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;

}