Search the Community
Showing results for tags 'elsatic burger menu animation svg'.
Found 1 result
-
Hi guys The designer at my work has designed this this animation for our navigation. I have uploadet it as a gif here: https://imgur.com/a/PXJ1z I have decided to try gsap after reading many articles but needs to be pointed in the right direction. How would you code this? After clicking the button the burger should do the animation. This is my current markup the that renders the starting point. <button id="burgerButton"> <svg id="burger" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"> <path id="Layer1" d="M16.88,17.32h16" style="fill: none;stroke: #474747;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2px"/> <path id="Layer3" d="M16.88,31.37h16" style="fill: none;stroke: #474747;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2px"/> <path id="Layer2" d="M13.88,24.35h22" style="fill: none;stroke: #474747;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2px"/> </svg> </button> Would you use the morphsvgplugin for this or would that be overkill? Can i just use TweenMax or TimelineMax? Or maybe TweenLite to save those kb's? All comments are helpfull! Also, if you have ideas how to to make that small elastic bounce effect it would be appreciated.
