1. In the first step of our Cheese Burger GIF, bread buns are made from a simple circle of bread. The shade (added with set matte effect), sesame seeds, and many more elements follow their parent with a little delay using valueAtTime expression in different timings as the following example:
var P=thisComp.layer(“bottom bun position”).transform.position; var D=linear(effect(“Slider Control”)(“Slider”),0,100,0,4); P.valueAtTime(time-D/9)+value Learn more about this expression from this ECAbrams tutorial.
2. Then in our burger gif animated icon, as the buns separate, our beef patties (colored with after-effects native turbulent noise) and cheese reveal in between, then as the buns close back together, our burger animated gif ingredients squeeze a little and stretch back. all with position properties and shape-path keyframes.
3. As the closed buns bounce back one more time, the cheese in this burger animated gif melts down.
4. Then the cheese, texture on beef patties, and sesame seeds move back and forth to create a 3D illusion in our Double Cheese Burger Icon GIF. sesame seeds follow different parent layers, moving in opposite directions to help this illusion. I`ve learned about this idea from ECAbrams creating the same effect on a snow-globe in a this icon animation tutorial.
5. In the end the one bun reshapes to make the first bread to create a motion graphics loop for our burger gif.
You can use this Double Cheese Burger Icon GIF for your own or commercial client`s website, menu, and application for an online or local restaurant. Don`t forget to take advantage of the free Burger after-effects project to customize to your own style, color, and timing, and export with your personalized requirements. Most commercial or personal uses are free, without attribution requirement under this License.
This Double Cheese Burger Icon GIF consists of 38 named after-effects shape layers with 100% customization possibility, 6 null objects, and various effects and expressions with 4 seconds and 43 frames duration on 50 fps (243 total frames), available in 1080p Transparent GIF icon, 350px lossy transparent preview GIF icon, and after-effects source project file.

Leave a Reply

Your email address will not be published. Required fields are marked *