Firefox issue with DrawSVG

[danboyle8637 12 Likes (Newbie)]

Just wanted to check if anybody has seen this error in Firefox related to DrawSVG

 

Error: Some browsers like Firefox won't report measurements of invisible elements (like display:none or masks inside defs).

 

My SVGs are invisible in the sense of display none. I only have opacity set to zero and drawSVG: "0%" when I set up my Tweens. 

 

Anybody else seen this?

[PointC 8,599 Likes (Superhero)]

Yep , that's correct. Trying to measure/animate display:none elements will cause problems. It's best to set the opacity to 0 and/or visibility:hidden. Check out autoAlpha:

https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha

 

Getting dimensions and animating masks and other non-rendered elements in the <defs> can also be problematic in some browsers, but we've discussed workarounds in a few threads.  

 

Happy tweening.

[danboyle8637 12 Likes (Newbie)]

Sorry I mistyped above. I have not set display to none anywhere in my codebase. I only use opacity set to zero. And I just changed to autoAlpha so see if that made any difference.

 

But I still get this error. I'll try to reproduce. 

 

I am using React if that makes any difference with drawSVG.

[PointC 8,599 Likes (Superhero)]

Is it a mask or something in the <defs>?

 

If so, I wrote a little tip about that here:

If that's not the case, a demo would be helpful. Thanks.

[danboyle8637 12 Likes (Newbie)]

No because I don't have any <def> tags in my SVG... I am going to build a CodeSandbox tonight. 

 

I only get the error when I navigate away from the page that uses DrawSVG. When I navigate to it... nothing. 

 

Here is an example of an arrow component I'm drawing...

 

Maybe it's ScrollMagic messing things up?

 

import React, { Component } from "react"
import { TimelineMax, TweenMax } from "gsap"
import ScrollMagic from "scrollmagic"
import DrawSVG from "../greensock/DrawSVGPlugin"

class SolidArrowDownTransition extends Component {
  constructor(props) {
    super(props)

    this.drawSVG = DrawSVG
    this.arrowBody = null
    this.arrowHead = null

    this.setArrowBodyRef = element => {
      this.arrowBody = element
    }

    this.setArrowHeadRef = element => {
      this.arrowHead = element
    }
  }

  componentDidMount() {
    const arrowTl = new TimelineMax()
    const controller = new ScrollMagic.Controller()

    TweenMax.set([this.arrowBody, this.arrowHead], { autoAlpha: 0 })
    arrowTl.set([this.arrowBody, this.arrowHead], {
      autoAlpha: 1,
      drawSVG: "0%",
    })
    arrowTl
      .to(this.arrowBody, 1, { drawSVG: "100%" })
      .to(this.arrowHead, 0.6, { drawSVG: "100%" }, "-=0.3")

    const scene = new ScrollMagic.Scene({
      triggerElement: this.arrowBody,
      triggerHook: 0.68,
      duration: 500,
    }).setTween(arrowTl)

    controller.addScene(scene)
  }

  render() {
    const { width, height, className } = this.props

    return (
      <svg
        id="solid-arrow-down-transition"
        xmlns="http://www.w3.org/2000/svg"
        className={className}
        width={width}
        height={height}
        viewBox="0 0 70.9 249.25"
      >
        <path
          ref={this.setArrowHeadRef}
          id="arrow-head"
          d="M3.33 219.13l25.09 26.82 27.74-34.38"
          fill="none"
          stroke="#d7d7d7"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="6.62"
        />
        <path
          ref={this.setArrowBodyRef}
          id="arrow-body"
          d="M21.05 3.31c14.79 10.05 28.19 22.65 36.87 38.28s12.32 34.51 7.55 51.74c-6.22 22.46-25.23 38.94-35.69 59.77a85.68 85.68 0 0 0-3.67 67.39"
          fill="none"
          stroke="#d7d7d7"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="6.62"
        />
      </svg>
    )
  }
}

export default SolidArrowDownTransition

 

[elegantseagulls 209 Likes (Specialist)]

Is the error only in the console, or is it breaking the page? Since you're seeing this when you navigate away from the page, you might want to try to kill your tweens and destroy your ScrollMagic scenes on componentWillUnmount(). My guess is that this will fix that error.

[danboyle8637 12 Likes (Newbie)]

@elegantseagulls Ahh.... great idea! Nice thank you I am going to try this first thing in the morning. It makes sense... I hope it works. I'll report back.

[danboyle8637 12 Likes (Newbie)]

@elegantseagulls Nice. Cleaning up the animations worked. 

 

Is it a good idea to always kill and/or destroy animations when unmounting a component? I'm guessing yes.

 

Thank you for the help!

[elegantseagulls 209 Likes (Specialist)]

@danboyle8637,

 

Glad that worked!

 

Yes, it's definitely a good idea to kill animations (and scrollMagic scenes) on componentWillUnmount, otherwise you can get some bad bloat and/or unexpected results.