SVG outline not drawing or showing up at all

[fazilraja]

The S outline for Home/Logo does not load or show up, instead the logo just slowly rolls in without the outline

[IvSem]

It works, but very poorly :)
Use a different approach :)

[NertonSaintfort]

It works, but very poorly :) Use a different approach :)

How did you get it to work?

[IvSem]

use another library

[Ankitv003]

The S outline for Home/Logo does not load or show up, instead the logo just slowly rolls in without the outline

I found the solution for this with a little help from chatgpt.
Here is the prompt...
One possible reason for this error is that the useEffect hook is being executed before the SVG elements are fully rendered and accessible in the DOM. To ensure that the SVG elements are available, you can wrap your animation code inside a window.onload event listener, like this:
useEffect(() => {
gsap.registerPlugin(DrawSVGPlugin);

window.onload = () => {
gsap
.timeline()
.to(bgRef.current, {
duration: 1,
opacity: 1,
})
.from(outlineLogoRef.current, {
drawSVG: 0,
duration: 20,
});

gsap.fromTo(
  solidLogoRef.current,
  {
    opacity: 0,
  },
  {
    opacity: 1,
    delay: 4,
    duration: 4,
  }
);

};
}, []);
By wrapping the animation code inside window.onload, it ensures that the animation is only executed after all the elements on the page, including the SVG elements, are fully loaded and accessible in the DOM.

[Johndunking]

Here's what worked for me if you are still having this issue.

useEffect(() => {
gsap.registerPlugin(DrawSVGPlugin)

  gsap
  .timeline()
  .to(bgRef.current, {
    duration: 1,
    opacity: 1,
  })

  .fromTo(outlineLogoRef.current, 
    { duration: 2, drawSVG: '0%' },
    { duration: 2, drawSVG: '60%' }, 
    'start')

gsap.fromTo(
solidLogoRef.current,
{
opacity: 0,
},
{
opacity: 1,
delay: 4,
duration: 4,
}
)
},[])