Jump to content
GreenSock

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

Having trouble with reversing TimelineMax applied to SVG polygon clip-path.

Recommended Posts

Hi there,

 

What I want is for the polygons that make up the top-right triangle and the bottom-left triangle to 'expand' when hovered. This is done via a TimelineMax modifying the polygons' points.

I had this working using TweenLite to move everything when hovered over and then a bunch more TweenLites to move everything back, but because the actual situation I need this for is much more complicated, that became a huge pain really quickly. So I'm trying to convert as many things as possible to Timelines so I can just reverse them.

 

The problem I'm experiencing here is:

If you roll over one triangle, mouse-out of the SVG area, and then hover over the second triangle, it works as expected. However, if after page load you roll over one triangle, then immediately roll over the other, the first triangle will stay 'expanded'.

 

I'm guessing the problem is something to do with the original triangle's points being overwritten somehow but I haven't been able to figure it out. I tried using TweenLite.set() but nothing changed.

 

Thanks,

EK

See the Pen mdboObK by erinknowles (@erinknowles) on CodePen

Link to post
Share on other sites

Hi @Ek1

 

Have you tried using .fromTo Tweens for this? That way the start and endpoints are both existing in the animation code.


 

actionTrHover
  .fromTo($trPoly,time, {
    attr: {
      points: "0,0 100,0 100,100"
    }
  },
  {
    attr: {
      points: "-10,0 100,0 100,110"
    }
  }, 0)

 

  • Like 4
Link to post
Share on other sites

@elegantseagulls Thanks for this! Unfortunately unless I've done it wrong I ran into a similar problem - when I roll over one triangle, and then immediately over the other, the first triangle no longer animates (though it does register a hover event at least according to console logs).

Here's the link to the codepen again with your changes implemented:

See the Pen mdboObK by erinknowles (@erinknowles) on CodePen

Link to post
Share on other sites
15 hours ago, Ek1 said:

when I roll over one triangle, and then immediately over the other, the first triangle no longer animates

It seems to animate in both directions to me. Could describe how the demo is not working in more detail? Maybe with a diagram or something?

Link to post
Share on other sites

@Ek1 I think I see what's happening. Since you are tweening the same clippath(s) for both image hovers, playing and reversing, when you jump from one to the other, the values get their signals crossed as to what would take priority (the reverse or the new play).

I don't have time to test this, at the moment, but I think your best bet for this animation,would be to set up the animation as one timeline and set the progress to progress(.5), then use hover conditionals for the entire SVG and both images, Tweening to progress(0) or progress(1) on each image hovers, and back to the  progress(.5) on SVG unhover.

Also, to further simplify, and improve render performance, you really only need one ClipPath applied to the top (think z-index) image, as it'll just cover up the bottom image negating the need for a clippath on that one.

  • Like 4
Link to post
Share on other sites

Hi @elegantseagulls! Sorry for the late reply, I've been away.

 

Here's the forked version with your suggestion implemented:

See the Pen NWWKMVR?editors=1010 by erinknowles (@erinknowles) on CodePen

 

As you can see it works! It's buggy (I can't figure out how to set progress() at the very beginning) but that's a different problem, my actual problem is fixed! Thanks so much folks.

  • Like 1
Link to post
Share on other sites

Hi @Ek1

 

Just add actionHover.progress(.5)after you setup your timeline (line 120 on your codepen).

  • Like 4
Link to post
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.

×