animation does not work well in Firefox

[wisead 1 Likes (Newbie)]

HI for everybody! I need your help guys to fix the problem with animation in my NuxtJS project. Here is the link http://wisead.ru

It works good in Chrome, Opera, IE, Edge, but i don't know why it doesnt work good in ff

 

I just use this code

    animateLines() {
      this.linesRotation = new TimelineMax({})
      this.linesRotation.staggerTo(this.lines, .5, {scale: .6, rotation: this.rotateDeg, ease: Power3.easeInOut}, .035)
      this.linesRotation.staggerTo(this.lines, .5, {scale: 1, ease: Power3.easeInOut}, .035, "-=1.5")
      this.rotateDeg += 90
    }

 

 

[elegantseagulls 209 Likes (Specialist)]

I'm not seeing any issues in Firefox on Mac osX, however, I've noticed on other sites that animate large SVGs have some issues in FF (and especially Safari). This is, I believe, because animating SVG components (<path>, etc) cannot take advantage of hardware acceleration. Your best bet, if you keep running into issues, might be to rebuild your graphics/animation using <canvas>.

[wisead 1 Likes (Newbie)]

3 hours ago, elegantseagulls said:

I'm not seeing any issues in Firefox on Mac osX, however, I've noticed on other sites that animate large SVGs have some issues in FF (and especially Safari). This is, I believe, because animating SVG components (<path>, etc) cannot take advantage of hardware acceleration. Your best bet, if you keep running into issues, might be to rebuild your graphics/animation using <canvas>.

Thank you! And i think that canvas help solve the problem