Ek1

@elegantseagulls Fantastic, thanks so much Half of the reason I use GSAP is because the support community is so great.

Hi @elegantseagulls! Sorry for the late reply, I've been away. Here's the forked version with your suggestion implemented: https://codepen.io/erinknowles/pen/NWWKMVR?editors=1010 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.

@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: https://codepen.io/erinknowles/pen/mdboObK/left/

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

Alright thanks folks, I can take it from here. Have updated original pen with my fix.

Hi, Been struggling with this problem for a couple of days now, not sure what I'm doing wrong or my next steps. What I want: the box is centered in the screen. It's clicked and expands to fit the screen. When the modal is closed, I want the box to return to being centered in the screen, regardless of the size of the screen, or the width/height of the text. I can sort of hack it by setting the height of the box like (lineHeight of text + padding*2 + margin*2 + border*2) and then translating with vw and vh values but it doesn't feel browser-compatibility-friendly and there has to be a better way.