Kintyp Studio | Responsive Title Animations and Lower Thirds

Here is an example of how to configure Kintyp Studio | Responsive Title Animations and Lower Thirds:

Animation Settings

To configure the animation settings, follow these steps:

• Animation Type: Choose from the options "Slide", "Fade", "Scale", or "Rotate" to determine the animation type for your title.
• Animation Duration: Set the duration of the animation in seconds. For example, to set the animation to last for 2 seconds, enter "2".
• Animation Delay: Set the delay before the animation starts in seconds. For example, to set the animation to start 1 second after the title appears, enter "1".
• Animation Easing: Choose from the options "Linear", "Ease In", "Ease Out", or "Ease In Out" to determine the easing curve for your animation.

Example:

animationType: "Slide"
animationDuration: 2
animationDelay: 1
animationEasing: "Ease In"

Lower Thirds Settings

To configure the lower thirds settings, follow these steps:

• Lower Thirds Text: Enter the text you want to display in the lower thirds.
• Lower Thirds Font Size: Set the font size of the lower thirds text.
• Lower Thirds Font Color: Set the font color of the lower thirds text.
• Lower Thirds Background Color: Set the background color of the lower thirds.
• Lower Thirds Opacity: Set the opacity of the lower thirds.

Example:

lowerThirdsText: "This is a sample text"
lowerThirdsFontSize: 18
lowerThirdsFontColor: "#ffffff"
lowerThirdsBackgroundColor: "#333333"
lowerThirdsOpacity: 0.5

Responsive Settings

To configure the responsive settings, follow these steps:

• Responsive Breakpoints: Set the breakpoints for responsive design. For example, to set the breakpoints at 768px and 1024px, enter "768,1024".
• Responsive Animation Type: Choose from the options "Slide", "Fade", "Scale", or "Rotate" to determine the animation type for your title at each breakpoint.
• Responsive Animation Duration: Set the duration of the animation at each breakpoint in seconds.
• Responsive Animation Delay: Set the delay before the animation starts at each breakpoint in seconds.
• Responsive Animation Easing: Choose from the options "Linear", "Ease In", "Ease Out", or "Ease In Out" to determine the easing curve for your animation at each breakpoint.

Example:

responsiveBreakpoints: "768,1024"
responsiveAnimationType: {
  "768": "Slide",
  "1024": "Fade"
}
responsiveAnimationDuration: {
  "768": 2,
  "1024": 1.5
}
responsiveAnimationDelay: {
  "768": 1,
  "1024": 0.5
}
responsiveAnimationEasing: {
  "768": "Ease In",
  "1024": "Ease Out"
}

Style Settings

To configure the style settings, follow these steps:

• Title Font Family: Set the font family for the title.
• Title Font Size: Set the font size for the title.
• Title Font Color: Set the font color for the title.
• Title Background Color: Set the background color for the title.
• Title Opacity: Set the opacity for the title.

Example:

titleFontFamily: "Arial"
titleFontSize: 24
titleFontColor: "#333333"
titleBackgroundColor: "#ffffff"
titleOpacity: 0.5

Here are the features of Kintyp Studio:

1. Responsive Title Animations: Kintyp Studio offers ten types of responsive text animations that can be used to present messages in attractive ways in hero headers, synced video overlays, or as paragraph titles in text content.
2. Lower Thirds: The product includes lower third animations that can be used to loop independently from videos and in sync with YouTube videos.
3. Video Overlays: Kintyp Studio allows you to use the HTML5 video object and handle the timeupdate event to monitor the currentTime value, enabling you to start text overlays at specific points in time.
4. Hero Header: The product includes a hero header example that uses all effects to present a long message, creating a continuous loop.
5. Paragraph Titles: Kintyp Studio can be used as titles in text content, with animations starting one after another and looping on their own.
6. Authoring Tool: Kintyp Studio includes an authoring tool that allows you to build your effects one by one, with a simple step-by-step process to customize your content and generate the needed code.
7. Customizable Parameters: The product offers more than 20 customizable parameters, enabling you to tailor the animations to your specific needs.
8. Event Handling: Kintyp Studio allows you to handle three events: at the end of the showing animation, at the end of the wait time, and at the end of the hiding animation.
9. SEO Friendly: The product is designed to be SEO friendly, making it easy to optimize your website for search engines.
10. Responsive Behavior: Kintyp Studio uses relative font size units and recalculates values if the container is smaller than the viewport, ensuring responsive behavior on different devices.

Note that the product does not support IE11 and is tested on various devices to ensure proper behavior on different display sizes.