Animated Image

info

This is a documentation for the template you can find on “HTML Graphics - a Marketplace by SPX”.

Animation

One image and four animations. Select your image and choose which animation to use for in and out animation! The template features four different animations.

1. Down-Down

If you choose this option, your image will come in from the top into frame, when you tell it to stop, it descends down off screen.

2. Down-Up

This animation is like a roll-down curtain. The image comes down into view and goes back up again to leave.

3. Left to right

Image moves to the right side.

4. Blur, Scale, Opacity

This animation is a mix of decreasing blurriness, increasing opacity and scaling it a little bit down until its fully visible. The out-animation works vice versa.

Credits

There is a text field for your attribution. If you need to attribute someone, just type whatever text shall be displayed. If you don't want to attribute the source or the photographer you can just hide it by unchecking the corresponding checkbox.

We recommend cropping your images beforehand to a resolution of 1920x1080 pixels.

These design attributes are customizable:

• Animation type
• Use credits or not
• Credit text
• Image

Get creative and make it your own!

Use it in SPX

Copy the HTML Template into this folder inside the SPX GC structure:

\ASSETS\templates

Copy the Images You want to use (1920x1080px, PNG) into this folder inside the SPX GC structure:

\ASSETS\media\images

Use it in CasparCG

Copy all files (HTML-Template and images-folder) to you CasparCG-Template Folder. All images need to be in the "images" folder next to the template.

Here are the technical parameters if you wanted to play the template from CasparCG Client:

_animationType = 0/1/2 or 3, default : 0 
_creditsOnOff = 0 or 1, default : 1
_creditsText = string, default: StreamShapers, Pexels - Quang Nguyen Vinh
_image = string (image-name) default: two-man-on-boat.png 

Some more information

The image-animation was made in Adobe After Effects, exported with Bodymovin and converted to the final HTML graphic template using StreamShapers Ferryman.

Once purchased on SPX Marketplace you are free to use it for all your productions. No need to attribute or anything.

Have a look at StreamShapers tutorials to learn about creating HTML Graphic Template with After Effects. Contact us via Email or the community via StreamShapers Discord Channel.