Jump to content
GreenSock

jcrr1985

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

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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

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