Jump to content
Search Community

Elastic svg burger animation

faderfrost test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

Well ya, easiest way to go about it would to use MorphSVGPlugin, which won't be overkill at all unless of course you overuse it throughout the page.

 

You can do that manually too but it is going to be time consuming to figure out how every effect should play out. GSAP animates any numbers or numbers contained within a string. So you can animate your paths by passing string of ending path. Downside to this approach is, GSAP does bunch of calculations to facilitate you to use complex paths and morph them into each other. If you try to do it manually, you will need make sure that your path is identical with only changing thing to be numbers. Your line, curve, arc should be in same sequence in both start and end path. If you can't keep the same sequence then you will need the MorphSVGPlugin.

 

To save file size, you can use TweenLite but you will need few other plugins to make this effect work.

 

1. CSSPlugin to animate scale of the middle line.

2. AttrPlugin to animate attribute

3. EasePack plugin so you can use complex easing effects

4. CustomEase plugin to be able to use custom ease, as the easing effect that you have used isn't simple elastic ease. You will need to use customEase for it.

5. Finally you will need the TimelineLite as well to be able to simplify editing and to organize complex animations into single timeline.

 

If you use TweenMax then you will only need customEase plugin as rest files will be included with it. If you don't want to use customEase then you can resort to using Back ease which will give you similar effect with minor compromise.

 

See the Pen vRmgZj?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

 

  • Like 5
Link to comment
Share on other sites

Nice work @Sahil :)

 

I was just starting on something similar when I saw you post your solution. I think animating the d attribute string is a better approach in this case. I think morph might be a bit tricky. I haven't tried it, but I have a feeling it wouldn't be quite as smooth. Well done!

 

PS Why don't you have your picture on your CodePen profile? How can I be sure it's really you? ;)

 

 

  • Like 2
Link to comment
Share on other sites

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.
 

Link to comment
Share on other sites

First example, I hand coded SVG. Just to be sure that I keep things in sequence, sometimes illustrator can do unpredictable things.

 

Second example I did that with Illustrator, while creating the end paths illustrator changed them to polygons. So using illustrator can give you unpredictable output which will make it hard to animate stuff like my first example.

 

Following article shows how you can hand code SVG,

 

https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368

 

For more advanced stuff you need to visit to W3 docs, or you can google for any other article.

https://www.w3.org/TR/SVG/paths.html#DAttribute

 

Your second example looks complicated to achieve without MorphSVGPlugin, most challenging part is creating circle using curves and then be able to convert those curves into straight lines. In my opinion, it will be worth going club membership as it seems really necessary for your project.

  • Like 2
Link to comment
Share on other sites

I'd second @Sahil's recommendation to join Club GreenSock. With what you're doing, those bonus plugins will save you a bunch of time and your membership will pay for itself quickly. You'll also save on aspirin as you'll have fewer headaches dealing with browser inconsistencies. More info here:

 

https://greensock.com/club

 

Happy tweening.

:)

 

 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

@faderfrost ya it's useful to know how to hand code SVGs as sometimes you can fix/change minor things just from code or save yourself from going through the trouble of using illustrator for simple shapes.

 

Check following thread for SVG gotchas

 

 

Also check these two posts from @PointC 

 

 

You will find many helpful posts and demos from him in general.

 

Also I would recommend checking out the YouTube channel for some quick starters and helpful tips.

 

https://www.youtube.com/user/GreenSockLearning

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...