Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
danboyle8637

Firefox issue with DrawSVG

Recommended Posts

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?

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

@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.

  • Like 2
Link to comment
Share on other sites

@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!

  • Like 1
Link to comment
Share on other sites

@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.

  • Like 2
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.
×