Ek1
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Ek1
-
-
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.
- 1
-
@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:
-
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
-
Alright thanks folks, I can take it from here. Have updated original pen with my fix.
- 1
-
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.
See the Pen mdbWdRN by erinknowles (@erinknowles) on CodePen
Having trouble with reversing TimelineMax applied to SVG polygon clip-path.
in GSAP
Posted
@elegantseagulls Fantastic, thanks so much Half of the reason I use GSAP is because the support community is so great.