fh_codes
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by fh_codes
-
-
I'm new to GSAP and 3D animations in general, and I have little problem with a hover effect I'm working on. On mouseleave in the bottom of an element, the animation sometimes gets stuck going back and forth. Can be reproduced by exiting hover slowly on the bottom of the element.
Any thoughts on what I might do different to avoid this problem? Ideally I'd like to have all the elements margin:0 from each other, but that causes a whole other mess of problems as there's invisible parts of the elements overlapping each other and whatnot
See the Pen CbsaK by FreyrH (@FreyrH) on CodePen
EDIT: Iterated on the forks by jonathan and Peleg S and now have a much improved version:
- 1
3D Hover effect problem
in GSAP
Posted
Thank you Peleg S! That solves the exact problem with the flickering animation!
I also really like your approach there jonathan. The margin/padding was really giving me a hard time, your way is simpler and more effective
Thanks guys!
EDIT: I've made some changes and I've done away with the position hack in favor of getting to know transformOrigin() better(adding the 3rd parameter for z-axis)
Final(?) version:
See the Pen furAi by FreyrH (@FreyrH) on CodePen