Image order

Pre-staging Area

Background Image for your Gif

Your background image will have the animation placed on top at a location and size you decide. Design your background image so its size and aspect ratio are right for the place you intend to share it.

The background image needs to be hosted somewhere that's publicly accessible so it can be loaded here. If you don't already know of somewhere imgBB is a good choice (opens in a new tab / window).

See below for the best sizes on popular social media.

  • Pinterest
    • Pins: 1000x1500px
    • Story Pins: 1080x1920px
  • Twitter: 1280x1080px
  • Facebook
    • Post: 800x1200px or 1000x1500px
    • Story: 1080x1920px
  • Instagram
    • Feed: 1080x1350px
    • Story: 1080x1920px
  • LinkedIn - convert your Gif to MP4 (keep to less than 15s for autoplay and looping)
    • Web viewing: 1920x1080px
    • Mobile viewing: 1080x1350px
  • TikTok: 1080x1920px then convert your Gif to MP4 or Mov

If you need to convert your Gif to MP4 or other formats convertio is a good place to start (opens in a new tab / window)

For this, your background image needs to be hosted somewhere that's publicly accessible.
Just paste a link (url) to it below and then hit the add button

Image link:

Images available for animation

After adding your background image to the stage:

  1. Add all the images you want animated except the last one. Use a size of 100px
  2. Add them in the order you want them animated
  3. Add the last one at the size that you want all animated images to take on
  4. Scroll up to the stage and click the last one so it becomes selected (outline becomes blue)
  5. Put it into the right position on the background image (being selected, it will snap to the grid)
  6. While it's still selected, in the Edit gif animation settings pane, hit the use the selected image button
  7. Choose a value for the delay between images in your animation
  8. You can now hit the Make animated gif button on the left
    Note that the button isn't available to click until you've added a background image and at least two product view images
  9. When it's finished being made, in Firefox it'll auto-download to your computer. Other browsers might need you to confirm that's what you want to happen

If you change your mind about the order, you can use the stack order buttons to set them the way you want. To make it easier, make sure you have them overlapping and that way you can see the stack order.

Or you can clear the stage and start over.

Loading images... spinner

Pinning on Pinterest

mini animation preview:

Don't forget to change the pin's existing tracking code to reflect what you're sharing:
Change pin's tracking code:

If you've got the option for clean links checked, this doesn't apply.

Change the suggested tracking code to reflect the theme and / or product that you're about to pin

That way, when you make a referral sale, you'll see what made your promoting efforts successful.

It's also a good idea to include today's date in the tracking code so you'll also see when you pinned it and therefore how long it took for your efforts to be successful

Notes about your pin...

Pinterest gets the pin's title and its description from the linked product page meaning that the artist's title and description will be used.

Sometimes, after you click the button and then choose the option in Pinterest's dialog box to "see it now", the image area will be blank - don't worry, just refresh and you'll see your animation just fine. Maybe it takes a little time for Pinterest to cache it?

As long as you didn't check the box for clean links, your referral id is included in the pin's link. How? It's picked up from the product's page on Zazzle.

For Facebook / Twitter and so on, see the section below.

Sharing everywhere else

Edit gif animation settings

Choose an image as a 'master' to set the size and position of all images to be animated.

position relative to top left of background image:

Delay between images (seconds)
5 3.5 2 1.5 0.75

Cheat Sheet

Tips

How to use

  1. Add your background image - make sure you designed it at the right size for the social media you intend to use
  2. To make it easier, add all the images to be animated at 100px and add them in the order they're to appear in the animation
  3. Add the last one at the size you want them all to have in the animation
  4. Select the last one by clicking it (so it'll snap to the grid) and move it to the right place on top of the background image
  5. When it's in the right place, make sure it's selected and hit the use the selected image button in the Edit Gif Animation Settings pane
  6. At the same time, choose the delay between each image in the animation
  7. If you change your mind about the order, use the Image order buttons on the left - or clear the stage and start over
  8. Finally, hit the Make animated gif button on the left
    Note that the button isn't available to click until you've added a background image and at least two product view images

Store your promoting notes and background image links here

Use these notes to keep track of your background image links, products and places where you've shared. When you click save, the date is added at the front so you always know when you did what. These notes are specific to this animator.

If you need to, you can edit an existing note (but not the date it was created). When you've made your edits, click Update to apply your changes. The edited date is added at the end of the note.

The notes are stored locally in your browser and are 'persistent' so they're always available, even after you shut down and restart things. They're specific to the browser you're using at the time, so if you use different browsers, each will have its own notes.

It's a good idea not to put any personal info in them, just in case.

If you want to know more, read about local storage on this Wikipedia page (opens in a new tab / window).

Show notes since:
Today Yesterday 1 week 2 weeks 30 days 60 days all time

News

About News

Every time there's a change to this Nifty tool we'll announce it here. Whenever there's a new announcement, the previous one you saw will be shifted into the history.

If we need to, we'll update the current announcement instead of making a new one.

If you've hidden the news until there's a new announcement, you won't see updates. If you want to check for updates to the existing announcement from time to time, start the tool with this ?shownews=yes (and nothing else) at the end of the address bar.

If you don't use the tool for a while, you may miss some announcements entirely and they won't be in your history - but that's ok, just visit the Facebook group linked below if there's a new feature you need help with :)

The buttons give you full control over what's displayed in this panel or whether the panel itself is displayed at all, with an option to keep it hidden until there's a new announcement.

One final point: we'll also show you here if there's a general announcement about Nifty that we think you need to see - but it won't be added to your history for this tool.

If you need help about any announcement made, visit the NiftyToolZTips and Support Facebook group and ask there. To see an explanation of this tool, visit the Nifty Product Product Views Animator for Zazzle and Society6 page on our site.