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;
}