Kintyp Studio | Responsive Title Animations and Lower Thirds

Description

Kintyp Studio is a project inspired by some video effects, which I decided to make available for HTML designers and developers. Using the abilities of Julien Garnier’s Anime.js and with the power of CSS3 and JavaScript I present you ten responsive text animations. You can present your message in attractive way in your hero headers, synced video overlays or as paragraph titles in your text content. The applications are only limited by your imagination.

* IMPORTANT NOTE – the project DOES NOT support IE11 *

The product is tested on all variety of devices to make sure it reacts properly on different display sizes. I am using relative font size units, which values I also recalculate if the container is smaller than the viewport. This way the text content is the defining start point from where I calculate the sizes of all other elements that build each effect. In this way I achieve responsive behavior.

Usage

The smooth animation effects can be used in variety of cases. Some of them are:

• YouTube Overlays
• Video Overlays
• Hero Headers
• Paragraph Titles

YouTube Overlays

This demo shows a lower third that loops independently from the video and two animated messages that are in sync with the YouTube video.

Video Overlays

In this demo I use the HTML5 video object. It is possible to handle the timeupdate event and monitor the currentTime value, while the video is playing. Then you can simply decide at what point of time to start your text overlays. Same technique can be used with the HTML5 audio object.

Hero Header

This example uses all effects to present a long message. Each effect points to the next and the last one points to the first in order to create a continuous loop. This is the most common usage and works smooth even on very old devices.

Paragraph Titles

Here you can see how the animations can be used as titles in your text content. They start one after another and loop on their own.

How to use the authoring tool

The applications of the effect require, almost all of the times, more than one text animation. The Kintyp Studio is the tool that I created to enable you to build your effects one by one. You need to follow few simple steps to customize your content and to generate the needed code. You can find more details in the product’s documentation.

1. Choose effect type.
2. Set effect attributes.
3. Style your content.
4. Preview the result.
5. Publish your effect.

Features

• Ten types of animations.
• Responsive Behavior.
• SEO friendly.
• More than 20 customizable parameters.
• Ability to handle three events, which fire: at the end of the showing animation, at the end of wait time, at the end of the hiding animation.
• Authoring tool

Changelog

RELEASED