Troubles with SVG animation and masterTimeline

[Robert Wildling 18 Likes (Newbie)]

Hi to all!

 

I would need your advise on the given pen, which does not animate.

The idea of this little exercise is to learn SVG animation and also to follow along the coding practices outlined in the famous "Star Wars" pen presented in this article:
https://css-tricks.com/writing-smarter-animation-code/

I am having trouble to understand, why my code is not working: This function 
 

function def_animateParenthesisRight() {
  console.log("animate parens right")
  let tl = new TimelineMax()
  tl.to(pt, .35, { scaleX: 1 }, 0)
  tl.to(pm, .35, { y: 0, scaleX: 1, scaleY: 1 }, 0)
  tl.to(pb, .35, { y: 0, scaleX: 1 }, 0)
  return tl;
}

 

encapsulates a timeline. It is then assigned to a masterTimeline:
 

let masterTL = new TimelineMax({ paused: true })
masterTL.add(def_animateParenthesisRight(), 0)

 

And 2 buttons call the `masterTL.play()` or `masterTL.reverse()` function, which should shrink, respectively enlarge the right parenthesis.

But nothing happens... Why?

Thanks for your feedback!

See the Pen dQYBqj by rowild (@rowild) on CodePen

[Robert Wildling 18 Likes (Newbie)]

The above pen is a reduced one. The complete logo with additional animations is here:

See the Pen ZqRdzw by rowild (@rowild) on CodePen

 

 

It shows that other timelines animate quite all right, but the parenthesis is a troublemaker...

[OSUblake 9,990 Likes (Superhero)]

Don't set transform and transform-origin in your CSS for SVG. It will not work in every browser, especially transform-origin.

 

By default, GSAP uses the transform attribute for SVG elements. CSS > attributes. GSAP is correctly setting the transform, but your CSS is overriding it.

 

 

[Robert Wildling 18 Likes (Newbie)]

@OSUblake Thanks a billion times! I actually knew that - no idea, why I did it nevertheless... stupid me!
(Pen is updated with comments.)

[OSUblake 9,990 Likes (Superhero)]

If anyone is wondering why setting the transform origin in CSS for SVG elements is a bad idea - besides not being consistent in every browser, there's a new property that you may need to use in order to specify where the origin relates to.

 

Spoiler alert: IE/Edge doesn't support it. 

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box

 

view-box is kind of like setting svgOrigin with GSAP.