Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Robert Wildling

Troubles with SVG animation and masterTimeline

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

 

  • Like 7
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

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