Jump to content
Search Community

Firefox issue with DrawSVG

danboyle8637 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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

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.
×
×
  • Create New...