Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ryan_labar

MorphSVG - morphing object breaks after time passes

Go to solution Solved by Carl,

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

I'm using morphSVG to change the shape of an SVG that is already using the morph function. It works as expected if you click the trigger "Grow" button with in the first second or so of the animation, but breaks (won't morph) after that that. 

 

I'm relatively new to GSAP, so I'm hoping I'm not missing anything too obvious. 

 

I'm not sure what's causing this. Any thoughts?

 

See the Pen gaEEGR by ryan_labar (@ryan_labar) on CodePen

 

Thanks!

See the Pen by gaEEGR (@gaEEGR) on CodePen

Link to comment
Share on other sites

Hi Ryan :),

 

I took at look at your pen in FF, Chrome and IE and I see the 'water' sloshing (morphing) back and forth an all 3. Is that what you were referring to?

 

The only thing I saw was a sizing issue in IE, but that's just IE not playing nicely with SVG without an exact size given to it. 

 

Gotta love IE  :angry:  

 

PS the link to your CodePen loops back around to this thread for some reason so for anyone else reading this, the link is: 

See the Pen gaEEGR by ryan_labar (@ryan_labar) on CodePen

  • Like 1
Link to comment
Share on other sites

The issue is when you click the "Grow" button within one or so seconds it morphs to "50%" just fine, but if you wait it wont morph up to 50%, but rather statically jump. 

Link to comment
Share on other sites

Ahhhh... my mistake. Yes - that isn't working in FF and IE, but is working in Chrome.

 

I see Jonathan and Diaco are here now - they'll have all the answers. :)

 

Edit: now Blake is here too - it's all the titans of Greensock in one place!   :-P

  • Like 2
Link to comment
Share on other sites

I saw the issue being the fact that inside your slosh1 function. You need to make sure you define your tl as a variable inside that function. You need to add var before the tl variable on Line 2 in the codepen JS panel

 

You have this:

function slosh1() { //set sloshing
  tl = new TimelineMax({ /* you need add var before tl */

So you click the first time and nothing happens because the function runs.. but the tl variable inside your slosh1 function has no var defined so it acts in a global scope. It works the second time since after the first click the tl variable gets defined

 

So try this:

 

See the Pen JYzVGb by jonathan (@jonathan) on CodePen


 

function slosh1() { //set sloshing
  var tl = new TimelineMax({ /* add var before tl */
    paused: false,
    repeat: -1,
    yoyo: true,
    delay: 0
  });
...
...

So add var before the tl variable on Line 2 in the codepen JS panel

 

:)

  • Like 3
Link to comment
Share on other sites

Hi Jonathan, 

 

That doesn't seem to be fixing the issue... wait 3 seconds before hitting the .grow button. The #zero doesn't morph into #fifty, but if you click .grow right away (on page load), it works as intended.  

 

 

Link to comment
Share on other sites

  • Solution

Hi Ryan_labar,

 

Welcome to the GreenSock forums.

 

I think the issue is related to the fact that you are creating timelines with conflicting tweens.

 

Both the slosh1() and growOne() functions tell the "#zero" to morph into different shapes.

I took the approach of waiting to create the timeline from growOne() until the button is pressed and it seems to work.

 

Please load this: http://codepen.io/GreenSock/pen/YygMQe?editors=001, count to five and then press the button.

  • Like 6
Link to comment
Share on other sites

That is because you were also missing the var before the other tl variable inside your growOne() function.

 

You also need to add var before the tl variable on Line 24 in the codepen JS panel

 

See the Pen JYzVGb by jonathan (@jonathan) on CodePen

 

You had this:

function growOne() { //grow functions


  tl = new TimelineMax(); /* you need var before the tl variable also */

....

So make it like my above post. add var before the tl variable on line 24:

function growOne() { //grow functions


  var tl = new TimelineMax(); /* you need var before the tl variable also */

....

Both instances had to do with the variable scope within your functions. Always make sure you define your variables within your functions. If you don't you must define them outside your functions. But in this case you must define them within the functions for your animation functions using GSAP :)

Link to comment
Share on other sites

Thanks for the warm welcome, Carl! That worked like a charm. I thought that had something to do with it, but was starting to pull my hair out trying to find a solution! Thanks for the timely response, and great fix!

 

Jonathan: even with the var(s) added it's was still broken for me. It's a good reminder to always add those in there. Thanks for your responses!

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