Jump to content
Search Community

faderfrost

Members
  • Posts

    4
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

faderfrost's Achievements

1

Reputation

  1. Thanks for all your help! I will try to play around with this in codepen and then buy a membership later to download the plugins. I actually didn't thought these small animations would be advanced/complicated to do but now I know better. I will also teach myself how to hand code svg files. It seems like a skill that will become handy in many of my future projects. Thanks for the links.
  2. This is good work Sahil. It's easy to see you know what you are doing. Thank you so much for the codepen and the explanation (in your first post). this is very helpful. I am still unsure what approach is best but I decided to go with your first example simply because my membership does not allow me to download MorphSVGplugin at the moment. Looking at your first example I can see you changed my original "d" attributes in the path elements. I get why you are doing it but I would like to know how you came up with these numbers. Did you change the paths directly in code or do you use a program to come up with these numbers? If I want to animate this icon using the same effects: https://imgur.com/a/2vhi8 -. Should I then create paths the same way as in your codepen somehow? This is how my SVG file looks today. As you can see the "d" attribute looks very complicated. <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"> <path id="Layer2_0_1_STROKES" data-name="Layer2 0 1 STROKES" d="M14.06,36.65a8.28,8.28,0,0,1,1.77-5.4A4.33,4.33,0,0,1,19,29.38h11.9a4.78,4.78,0,0,1,3.4,1.87,7.83,7.83,0,0,1,2,5.4" style="fill: none;stroke: #474747;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2px"/> <path id="Layer1_0_1_STROKES" data-name="Layer1 0 1 STROKES" d="M25.21,13.13a5.77,5.77,0,0,1,4.25,1.8,5.86,5.86,0,0,1,1.75,4.25,6.2,6.2,0,0,1-.5,2.47,6.94,6.94,0,0,1-1.25,1.78,6.11,6.11,0,0,1-8.5,0,6,6,0,0,1-1.55-6A5.61,5.61,0,0,1,21,14.93,5.75,5.75,0,0,1,25.21,13.13Z" style="fill: none;stroke: #454545;stroke-miterlimit: 10;stroke-width: 2px"/> </svg> All help is appreciated.
  3. 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.
×
×
  • Create New...