Jump to content
Search Community

Troubles with SVG animation and masterTimeline

Robert Wildling 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

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

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

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