Stacks Image 6

Gif Player

Load animated GIF images on demand.

Gif Player

Loads animated Gif images only on demand.

Overview.

You may be aware, you can now add animated GIF images directly to your pages like any other image. But animated GIF's that load automatically at page load time have a few downsides. They are much larger than regular images so slow the page load time down dramatically. Also having a lot of GIF's animating at the same time after the page has loaded can be very distracting for your visitor.

Huge page load speed boost
Animated GIF images are much larger than a regular image. Loading them all at page load time dramatically increases the overall page load speed.

Automatically generated poster image
When you add an animated GIF to your page, the stack will automatically generate a poster image, to be displayed until the user wants to see the animation.

NEW: 3 Modes
On Demand: None of the animated GIF images are ever loaded at page load time.
Preload: The GIF will be preloaded and cached once all other page content has finished loading, so now plays instantly when clicked.
Autoplay: The GIF will be preloaded and cached once all other page content has finished loading, and instantly start playing

Familiar user experience.
We designed a familiar GIF mark that appears on the poster image to indicate to your visitor that they can click to see an animated GIF. The mark is fully animated to indicate when the animation is loading.

Instant download.

Version : 1.0.1

Responsive : Yes

First released : 5/6/2016

Last Updated : 6/6/2016

Stacks V 3.0 or greater.

Live demo.

You can see a few live examples of the stack in action below.

Note: the stack in this demo has it's mode set to "Autoplay" Why is this different from just dropping a GIF into my page? Because it will not attempt to load the GIF until all your other page content has finished loading, thus vastly improving page load speed.

Auto stop when GIF's leave the view.

Note: the stack in this demo has it's mode set to "Preloaded" If the user starts playing a GIF, and then scrolls away without stopping the GIF first, then as the GIF leaves the users view, it will be automatically stopped to save browser resources.(does not apply to autoplay mode)

Only ever load once.

Note: the stack in this demo has it's mode set to "On Demand" When one of your GIF's is loaded it is cached. This means the next time the user tries to load the same GIF it will load instantly. This can persist between visits to your page. The stack will detect if the user has cached the GIF, and completely skip the loading phase when appropriate.

Loading animations.

Note: the stack in this demo has it's mode set to "On Demand" When the user is interested in one of your GIF animations, they click to load and start playing. The GIF indicator will animate to indicate the GIF is loading.

The GIF's used in the demo are examples of cinemagraphs by cinemagraphs.com

Stacks settings.

In this section we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
Player mode

Choose one of the three modes for the stack:

  • On Demand: None of the animated GIF images are ever loaded at page load time.
  • Preload: The GIF will be preloaded and cached once all other page content has finished loading, so now plays instantly when clicked.
  • Autoplay: The GIF will be preloaded and cached once all other page content has finished loading, and instantly start playing

Gif image

Add your animated Gif image here.

Stacks edit mode.

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 297

Just to indicate you need to add your animated GIF image to an image well in the stacks settings panel.

Stacks Image 689

A poster image is automatically generated to indicate to the visitor this is an animated GIF image, and more lays within.

Stacks FAQ.

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

Known compatibility issues

There are no known compatibility issues with this stack.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Secure checkout.

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Instant download.

Stacks Image 589