User Submitted Refresh Animation Guide

By: Daniel Haire

A custom refresh animation for your local feed is an excellent way to make an impression on your herd, which is why we’re now allowing users to submit their own refresh animations! We encourage you to explore your area to find some visuals that best represent your city, school, or neighborhood.

Here are a few ideas to get you started:

Landmarks/Cities: Buildings, geographic formations, unique objects and other physical structures that encapsulate the spirit of your location. Be sure to include the name of your city in addition to the skyline.

Inside Jokes / Visual Quirks: You know that black swan that waddles across campus every full moon at midnight? Take advantage of that ghoulish fowl and throw her in your pulldown!

Design Guidelines

When designing your new jaw-dropping pulldown, there are a few things to keep in mind. Follow these requirements and yakkers in your area will be filled with uncontrollable delight.

• Keep designs constrained to 640 x 206 px

• Final files must be in PNG format

• Keep top 10 - 20px of design a solid color with no graphics.

• Use appropriate color palette (school colors, team colors, state flag, etc) and limit to 4 hues.

• Original artwork only. No copyrighted or plagiarized material (ex. school logos, sports logos)

• Keep it simple.

• No references to drugs or violence

• No photography.

• Aside from city, location, or school names, refrain from using text.

Option 1  |  Basic

Static pulldown

Create relevant artwork for your area using the guidelines on the previous page. Focus on unique elements that represent your location when designing your pulldown. Vague or irrelevant imagery will not be considered. Please resist the urge to use photographs or solar flares. 

Avoid placing any imagery in the center 160px circle, this is used for the yak head spin.

Option 2  | Advanced

Animated pulldown

Feeling a little ambitious and want to add some movement to your pulldown? Animated pulldowns pack a visual punch and will leave a great impression on your local herd. Supply us with 3 images and we’ll do the animating. In order to animate your pulldown we need 3 separate layers. Use a program like Photoshop or Illustrator to create and export your images. Make sure the backgrounds are transparent!

Option 3  | Expert

Full Control

This option is for the animators out there who want to test their craft by creating a fully custom pulldown animation.

Drawing Animation The drawing animation is the portion of the refresher that animates (or draws) as you swipe downward with your thumb.

• Length : 1 sec

• Frame rate : 60

• Output : PNG sequence

• File name: “drawing-image-[0-59]” (ex. drawing-image-1, drawing-image-2, etc.)

Loading Animation This is a portion of the animation that moves (rotates, bounces, swings, etc.) to indicate that the feed is loading. Make sure it loops (stops in the same position it starts)! 

• Length : 1 sec

• Frame rate : 18

• Output : PNG sequence

• File name : “loading-image-[0-17]”

Compress both folders into one zip file