Unable to roll back changes of "d" attribute of a path using morphingSVGplugin

[jcrr1985]

Hi green super heroes! I'm experiencing an issue while trying to implement morphSVG. I've saved two paths into their correspondent variables("circle" and "elephan"t), and  I'm trying to fire an event on mouseover on the the first path( the circle )to turn it into the elephant and then a mouseout event to turn it back into the circle and then repeat the cycle infinitely on mouseover and out, but I can only achieve to turn the circle into the elephant when I first hover on it, but even though I have set the second function to be called  onmouseover the circle, the "d" attribute doesn't tween anymore.

Can you please have a look at my pen and lend me a hand? :)

Thanks.

See the Pen qJeOxb by jcrr1985 (@jcrr1985) on CodePen

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

The issue is that you are using a timeline which is active. When you hover the the circle it turns into an elephant. The timeline starts and the it keeps running. Then you move the pointer out of the elephant shape. At that point you're adding another instance to the timeline, 0.1 seconds after the end of the last instance, which is the circle morphing into an elephant, but at that moment the timeline's playhead is passed that point so you don't see the elephant going back to a circle.

 

I would recommend you using a single TweenLite instance and then the play and reverse methods. Also if you want to speed the reverse process, you can use https://greensock.com/docs/TweenLite/timeScale() as well. This code seems to do what you're looking for:

 

var elephant = $("#elephant");
var circle = $("#circle");

var t = TweenLite.to(circle, 1, {
  morphSVG: "#elephant",
  paused: true
});

function toElephant() {
  // timescale 1 returns the tween to it's original speed
  t.timeScale(1).play();
}
function toCircle() {
  // timescale 3 makes the tween 3 times faster
  t.timeScale(3).reverse();
}

$("#circle").hover(
  function() {
    toElephant();
  },
  function() {
    toCircle();
  }
);

 

Happy Tweening!!

[jcrr1985]

That was amazing buddy, excel! Thank you very much! :)