Jump to content
Search Community

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

Ek1 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 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 left by erinknowles (@erinknowles) on CodePen

Link to comment
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:

Link to comment
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 comment
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 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...