CINXE.COM
Animations - H5mag User Guide
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Animations - H5mag User Guide</title> <meta name="keywords" content="" > <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;1,200;1,300;1,400;1,600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="/css/reset.css" type="text/css"> <link rel="stylesheet" href="/css/text.css" type="text/css"> <link rel="stylesheet" href="/css/search.css" type="text/css"> <link rel="stylesheet" href="/css/pagination.css" type="text/css"> <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen"> <link rel="stylesheet" href="/css/print.css" type="text/css" media="print"> <link rel="stylesheet" href="/css/main.css" type="text/css"> <link rel="stylesheet" href="/css/mobile.css" type="text/css"> <link rel="stylesheet" href="/css/mobile-menu.css" type="text/css"> <script src="//code.jquery.com/jquery-1.11.3.js"></script> <script src="/js/main.js"></script> </head> <body> <div class="navigation-container"> <div class="hamburger"></div> </div> <div class="mobile-menu"> <div class="close navigation-container"></div> <ul class="navigation"> <li> <a data-id="menu-84" title="Frequently Asked Questions" class=" main" href="/faq">Frequently Asked Questions</a> </li> <li> <a data-id="menu-111" title="API" class=" main" href="/api">API</a> </li> <li class="active"> <a data-id="menu-2" class=" main mainactive" href="/basics">Basics</a> <ul> <li> <a data-id="menu-20" href="/basics/getting-started">Getting started</a> </li> <li> <a data-id="menu-17" href="/basics/structure-terminology">Structure</a> </li> <li> <a data-id="menu-35" href="/basics/system-requirements">System requirements</a> </li> <li> <a data-id="menu-18" href="/basics/artboards">Responsive Artboards</a> <ul> <li> <a data-id="menu-47" href="/basics/artboards/setup">Bleeds</a> </li> </ul> </li> <li> <a data-id="menu-21" href="/basics/managing-articles">Articles</a> </li> <li> <a data-id="menu-66" title="Restore older versions of saved articles" href="/basics/versioning">Saving & versioning</a> </li> <li> <a data-id="menu-22" href="/basics/images">Images</a> </li> <li> <a data-id="menu-39" title="Webfonts" href="/basics/webfonts">Webfonts</a> </li> <li> <a data-id="menu-65" href="/basics/saved-styles">Saved Styles</a> </li> <li> <a data-id="menu-56" title="Actions" href="/basics/actions">Actions</a> <ul> <li> <a data-id="menu-37" title="popups" href="/basics/actions/popups">Popups</a> </li> <li> <a data-id="menu-57" title="Internal, external and email links" href="/basics/actions/links">Links</a> </li> <li> <a data-id="menu-73" title="Social media sharing and follow actions" href="/basics/actions/social-media">Social Media</a> </li> </ul> </li> <li class="active"> <a data-id="menu-12" class=" active" href="/basics/animations">Animations</a> </li> <li> <a data-id="menu-76" title="Guides: grids, columns & layouts" href="/basics/guides-grids">Guides: grids & columns</a> </li> <li> <a data-id="menu-117" href="/basics/table-of-contents">Table of Contents</a> </li> <li> <a data-id="menu-44" href="/basics/previews">Previews</a> </li> <li> <a data-id="menu-45" href="/basics/publishing">Publishing</a> </li> <li> <a data-id="menu-120" href="/basics/managing-editions">Exporting/Importing editions</a> </li> </ul> </li> <li> <a data-id="menu-8" class=" main" href="/areas">Areas</a> <ul> <li> <a data-id="menu-43" href="/areas/heading">Heading</a> </li> <li> <a data-id="menu-24" href="/areas/text">Text</a> </li> <li> <a data-id="menu-40" href="/areas/section">Section</a> </li> <li> <a data-id="menu-25" href="/areas/image">Image</a> </li> <li> <a data-id="menu-123" href="/areas/gallery">Gallery</a> </li> <li> <a data-id="menu-26" href="/areas/video">Video</a> </li> <li> <a data-id="menu-59" href="/areas/advanced">Advanced areas</a> <ul> <li> <a data-id="menu-28" href="/areas/advanced/twitter">Twitter widget</a> </li> <li> <a data-id="menu-29" href="/areas/advanced/facebook">Facebook widget</a> </li> <li> <a data-id="menu-27" href="/areas/advanced/soundcloud">Soundcloud widget</a> </li> <li> <a data-id="menu-36" href="/areas/advanced/iframe">Iframe</a> </li> <li> <a data-id="menu-119" href="/areas/advanced/audio-player">Audio player</a> </li> </ul> </li> </ul> </li> <li> <a data-id="menu-60" class=" main" href="/layout">Layout Techniques</a> <ul> <li> <a data-id="menu-61" href="/layout/custom-columns">Custom columns</a> </li> <li> <a data-id="menu-62" href="/layout/scrolling-content-fixed-background">Scrolling content over fixed background</a> </li> <li> <a data-id="menu-63" href="/layout/anchoring-content-to-edges">Anchoring content to edges</a> </li> <li> <a data-id="menu-124" href="/layout/sticky-content">Sticky content</a> </li> </ul> </li> <li> <a data-id="menu-48" class=" main" href="/workflow">Creating digital magazines</a> <ul> <li> <a data-id="menu-49" href="/workflow/concept-target-audience-and-goals">Concept, target audience & goals</a> </li> <li> <a data-id="menu-50" href="/workflow/page-plan-and-publication-structure">Page plan & publication structure</a> </li> <li> <a data-id="menu-51" href="/workflow/graphic-design-and-layout">Graphic design & layout</a> </li> <li> <a data-id="menu-52" href="/workflow/developing-master-pages-and-styling">Developing masters & styling</a> </li> <li> <a data-id="menu-53" href="/workflow/content-development-and-integration">Content development & integration</a> </li> <li> <a data-id="menu-54" href="/workflow/getting-it-out-there">And then… getting it out there!</a> </li> </ul> </li> <li> <a data-id="menu-10" class=" main" href="/design-guidelines">Design Guidelines</a> </li> <li> <a data-id="menu-16" class=" main" href="/statistics-analytics">Statistics & Analytics</a> </li> <li> <a data-id="menu-132" class=" main" href="/modules">Modules</a> <ul> <li> <a data-id="menu-130" href="/modules/dataset-module">Dataset module</a> </li> <li> <a data-id="menu-133" href="/modules/translate-module">Translate module</a> </li> <li> <a data-id="menu-115" href="/modules/feedback-module">Feedback Module</a> <ul> <li> <a data-id="menu-116" title="How to create a form" href="/modules/feedback-module/how-to-create-a-form">How to create a form</a> </li> <li> <a data-id="menu-118" title="Feedback Results" href="/modules/feedback-module/feedback-results">Feedback Results</a> </li> </ul> </li> <li> <a data-id="menu-85" href="/modules/subscriber-module">Subscriber Module</a> <ul> <li> <a data-id="menu-86" href="/modules/subscriber-module/acquiring-subscribers">Gaining subscribers</a> </li> <li> <a data-id="menu-95" href="/modules/subscriber-module/adding-subscribers">Adding subscribers</a> </li> <li> <a data-id="menu-96" href="/modules/subscriber-module/subscriber-list">Subscriber list</a> </li> <li> <a data-id="menu-87" href="/modules/subscriber-module/push-notifications">Push notification</a> </li> <li> <a data-id="menu-97" href="/modules/subscriber-module/email-notification">Email notification</a> </li> <li> <a data-id="menu-98" href="/modules/subscriber-module/subscriber-settings">Subscriber settings</a> </li> <li> <a data-id="menu-99" href="/modules/subscriber-module/sending-notifications">Sending notifications</a> </li> <li> <a data-id="menu-100" href="/modules/subscriber-module/notification-progress-history">Notifications progress & history</a> </li> <li> <a data-id="menu-101" href="/modules/subscriber-module/notification-analytics">Notifications analytics</a> </li> <li> <a data-id="menu-83" title="Web Push certificate" href="/modules/subscriber-module/web-push-certificate">Web Push certificate</a> </li> <li> <a data-id="menu-112" title="Transfer Zapier Mailchimp" href="/modules/subscriber-module/transfer-zapier-mailchimp">Transfer Zapier Mailchimp</a> </li> <li> <a data-id="menu-113" href="/modules/subscriber-module/connecting-mailchimp-zapier-h5mag">Connecting Mailchimp with H5mag using Zapier</a> </li> <li> <a data-id="menu-114" href="/modules/subscriber-module/automate-referrals-zapier">Automate Referrals Using Zapier</a> </li> </ul> </li> </ul> </li> <li> <a data-id="menu-6" class=" main" href="/advanced-features">Advanced Features</a> <ul> <li> <a data-id="menu-55" title="CSS & Javascript" href="/advanced-features/custom-scripting">CSS & Javascript</a> </li> <li> <a data-id="menu-104" title="Authentication" href="/advanced-features/authentication">Authentication</a> </li> <li> <a data-id="menu-15" title="URL structure" href="/advanced-features/url-structure">URL structure</a> </li> <li> <a data-id="menu-46" href="/advanced-features/custom-navigation-bar">Navigation bar</a> </li> <li> <a data-id="menu-77" href="/advanced-features/toc-styling">TOC styling</a> </li> <li> <a data-id="menu-74" href="/advanced-features/scrollbar-styling">Scrollbar styling</a> </li> <li> <a data-id="menu-3" title="Keyboard shortcuts" href="/advanced-features/keyboard-shortcuts">Keyboard shortcuts</a> </li> <li> <a data-id="menu-78" href="/advanced-features/sharepoint">Access Control using Microsoft 365</a> </li> <li> <a data-id="menu-79" href="/advanced-features/autoplay">Autoplay</a> </li> <li> <a data-id="menu-103" href="/advanced-features/okta-integration">Okta integration</a> </li> <li> <a data-id="menu-80" href="/advanced-features/ms365-integration">User Provisioning via Microsoft 365</a> </li> <li> <a data-id="menu-102" title="After Effects" href="/advanced-features/vector-animations-using-adobe-after-effects">After Effects</a> </li> <li> <a data-id="menu-106" title="Adobe Animate" href="/advanced-features/adobe-animate">Adobe Animate</a> </li> <li> <a data-id="menu-109" href="/advanced-features/building-a-h5mag-app-using-react-native">Building a H5mag App using React Native</a> </li> <li> <a data-id="menu-129" title="Presentation Mode" href="/advanced-features/presentation-mode">Presentation Mode</a> </li> </ul> </li> </ul> <div class="bottom"> <div class="submenu"> <div class="first half"> <a href="http://h5mag.com/blog"><p>Blog</p></a> <a href="http://h5mag.com/updates"><p>Versions</p></a> </div><div class="second half"> <a href="http://docs.h5mag.com/"><p>User Guide</p></a> <a href="http://h5mag.com/contact"><p>Contact Us</p></a> </div> </div> <div class="contact"> <a href="tel:+310703184404">+31 (0)70 31 84 404</a><br> <a href="mailto:support@h5mag.com">support@h5mag.com</a><br> <a href="https:twitter.com/h5mag"><img src="/img/twitter.svg"/>@H5mag</a> </div> </div> </div> <header> <div class="container"> <aside> <header><a href="https://h5mag.com"><img src="/img/h5mag_compact_logo.png" alt="" width="75" height="72" /><a href="/">User Guide</a></a></header> <nav class="main desktop"> <ul class="navigation"> <li> <a id="menu-84" title="Frequently Asked Questions" class=" main" href="/faq">Frequently Asked Questions</a> </li> <li> <a id="menu-111" title="API" class=" main" href="/api">API</a> </li> <li class="active"> <a id="menu-2" class=" main mainactive" href="/basics">Basics</a> <ul> <li> <a id="menu-20" href="/basics/getting-started">Getting started</a> </li> <li> <a id="menu-17" href="/basics/structure-terminology">Structure</a> </li> <li> <a id="menu-35" href="/basics/system-requirements">System requirements</a> </li> <li> <a id="menu-18" href="/basics/artboards">Responsive Artboards</a> <ul> <li> <a id="menu-47" href="/basics/artboards/setup">Bleeds</a> </li> </ul> </li> <li> <a id="menu-21" href="/basics/managing-articles">Articles</a> </li> <li> <a id="menu-66" title="Restore older versions of saved articles" href="/basics/versioning">Saving & versioning</a> </li> <li> <a id="menu-22" href="/basics/images">Images</a> </li> <li> <a id="menu-39" title="Webfonts" href="/basics/webfonts">Webfonts</a> </li> <li> <a id="menu-65" href="/basics/saved-styles">Saved Styles</a> </li> <li> <a id="menu-56" title="Actions" href="/basics/actions">Actions</a> <ul> <li> <a id="menu-37" title="popups" href="/basics/actions/popups">Popups</a> </li> <li> <a id="menu-57" title="Internal, external and email links" href="/basics/actions/links">Links</a> </li> <li> <a id="menu-73" title="Social media sharing and follow actions" href="/basics/actions/social-media">Social Media</a> </li> </ul> </li> <li class="active"> <a id="menu-12" class=" active" href="/basics/animations">Animations</a> </li> <li> <a id="menu-76" title="Guides: grids, columns & layouts" href="/basics/guides-grids">Guides: grids & columns</a> </li> <li> <a id="menu-117" href="/basics/table-of-contents">Table of Contents</a> </li> <li> <a id="menu-44" href="/basics/previews">Previews</a> </li> <li> <a id="menu-45" href="/basics/publishing">Publishing</a> </li> <li> <a id="menu-120" href="/basics/managing-editions">Exporting/Importing editions</a> </li> </ul> </li> <li> <a id="menu-8" class=" main" href="/areas">Areas</a> <ul> <li> <a id="menu-43" href="/areas/heading">Heading</a> </li> <li> <a id="menu-24" href="/areas/text">Text</a> </li> <li> <a id="menu-40" href="/areas/section">Section</a> </li> <li> <a id="menu-25" href="/areas/image">Image</a> </li> <li> <a id="menu-123" href="/areas/gallery">Gallery</a> </li> <li> <a id="menu-26" href="/areas/video">Video</a> </li> <li> <a id="menu-59" href="/areas/advanced">Advanced areas</a> <ul> <li> <a id="menu-28" href="/areas/advanced/twitter">Twitter widget</a> </li> <li> <a id="menu-29" href="/areas/advanced/facebook">Facebook widget</a> </li> <li> <a id="menu-27" href="/areas/advanced/soundcloud">Soundcloud widget</a> </li> <li> <a id="menu-36" href="/areas/advanced/iframe">Iframe</a> </li> <li> <a id="menu-119" href="/areas/advanced/audio-player">Audio player</a> </li> </ul> </li> </ul> </li> <li> <a id="menu-60" class=" main" href="/layout">Layout Techniques</a> <ul> <li> <a id="menu-61" href="/layout/custom-columns">Custom columns</a> </li> <li> <a id="menu-62" href="/layout/scrolling-content-fixed-background">Scrolling content over fixed background</a> </li> <li> <a id="menu-63" href="/layout/anchoring-content-to-edges">Anchoring content to edges</a> </li> <li> <a id="menu-124" href="/layout/sticky-content">Sticky content</a> </li> </ul> </li> <li> <a id="menu-48" class=" main" href="/workflow">Creating digital magazines</a> <ul> <li> <a id="menu-49" href="/workflow/concept-target-audience-and-goals">Concept, target audience & goals</a> </li> <li> <a id="menu-50" href="/workflow/page-plan-and-publication-structure">Page plan & publication structure</a> </li> <li> <a id="menu-51" href="/workflow/graphic-design-and-layout">Graphic design & layout</a> </li> <li> <a id="menu-52" href="/workflow/developing-master-pages-and-styling">Developing masters & styling</a> </li> <li> <a id="menu-53" href="/workflow/content-development-and-integration">Content development & integration</a> </li> <li> <a id="menu-54" href="/workflow/getting-it-out-there">And then… getting it out there!</a> </li> </ul> </li> <li> <a id="menu-10" class=" main" href="/design-guidelines">Design Guidelines</a> </li> <li> <a id="menu-16" class=" main" href="/statistics-analytics">Statistics & Analytics</a> </li> <li> <a id="menu-132" class=" main" href="/modules">Modules</a> <ul> <li> <a id="menu-130" href="/modules/dataset-module">Dataset module</a> </li> <li> <a id="menu-133" href="/modules/translate-module">Translate module</a> </li> <li> <a id="menu-115" href="/modules/feedback-module">Feedback Module</a> <ul> <li> <a id="menu-116" title="How to create a form" href="/modules/feedback-module/how-to-create-a-form">How to create a form</a> </li> <li> <a id="menu-118" title="Feedback Results" href="/modules/feedback-module/feedback-results">Feedback Results</a> </li> </ul> </li> <li> <a id="menu-85" href="/modules/subscriber-module">Subscriber Module</a> <ul> <li> <a id="menu-86" href="/modules/subscriber-module/acquiring-subscribers">Gaining subscribers</a> </li> <li> <a id="menu-95" href="/modules/subscriber-module/adding-subscribers">Adding subscribers</a> </li> <li> <a id="menu-96" href="/modules/subscriber-module/subscriber-list">Subscriber list</a> </li> <li> <a id="menu-87" href="/modules/subscriber-module/push-notifications">Push notification</a> </li> <li> <a id="menu-97" href="/modules/subscriber-module/email-notification">Email notification</a> </li> <li> <a id="menu-98" href="/modules/subscriber-module/subscriber-settings">Subscriber settings</a> </li> <li> <a id="menu-99" href="/modules/subscriber-module/sending-notifications">Sending notifications</a> </li> <li> <a id="menu-100" href="/modules/subscriber-module/notification-progress-history">Notifications progress & history</a> </li> <li> <a id="menu-101" href="/modules/subscriber-module/notification-analytics">Notifications analytics</a> </li> <li> <a id="menu-83" title="Web Push certificate" href="/modules/subscriber-module/web-push-certificate">Web Push certificate</a> </li> <li> <a id="menu-112" title="Transfer Zapier Mailchimp" href="/modules/subscriber-module/transfer-zapier-mailchimp">Transfer Zapier Mailchimp</a> </li> <li> <a id="menu-113" href="/modules/subscriber-module/connecting-mailchimp-zapier-h5mag">Connecting Mailchimp with H5mag using Zapier</a> </li> <li> <a id="menu-114" href="/modules/subscriber-module/automate-referrals-zapier">Automate Referrals Using Zapier</a> </li> </ul> </li> </ul> </li> <li> <a id="menu-6" class=" main" href="/advanced-features">Advanced Features</a> <ul> <li> <a id="menu-55" title="CSS & Javascript" href="/advanced-features/custom-scripting">CSS & Javascript</a> </li> <li> <a id="menu-104" title="Authentication" href="/advanced-features/authentication">Authentication</a> </li> <li> <a id="menu-15" title="URL structure" href="/advanced-features/url-structure">URL structure</a> </li> <li> <a id="menu-46" href="/advanced-features/custom-navigation-bar">Navigation bar</a> </li> <li> <a id="menu-77" href="/advanced-features/toc-styling">TOC styling</a> </li> <li> <a id="menu-74" href="/advanced-features/scrollbar-styling">Scrollbar styling</a> </li> <li> <a id="menu-3" title="Keyboard shortcuts" href="/advanced-features/keyboard-shortcuts">Keyboard shortcuts</a> </li> <li> <a id="menu-78" href="/advanced-features/sharepoint">Access Control using Microsoft 365</a> </li> <li> <a id="menu-79" href="/advanced-features/autoplay">Autoplay</a> </li> <li> <a id="menu-103" href="/advanced-features/okta-integration">Okta integration</a> </li> <li> <a id="menu-80" href="/advanced-features/ms365-integration">User Provisioning via Microsoft 365</a> </li> <li> <a id="menu-102" title="After Effects" href="/advanced-features/vector-animations-using-adobe-after-effects">After Effects</a> </li> <li> <a id="menu-106" title="Adobe Animate" href="/advanced-features/adobe-animate">Adobe Animate</a> </li> <li> <a id="menu-109" href="/advanced-features/building-a-h5mag-app-using-react-native">Building a H5mag App using React Native</a> </li> <li> <a id="menu-129" title="Presentation Mode" href="/advanced-features/presentation-mode">Presentation Mode</a> </li> </ul> </li> </ul> </nav> </aside> <main> <form method="get" action="/search" class="search"> <input type="hidden" name="page" value="1"> <input type="text" name="q" value="" class="text"></input> <input type="submit" class="button" value=""> </form> <article> <h1>Animations</h1> <section><p>H5mag features an easy to use animation system.</p> <h2>How to add an animation</h2> <ol> <li>Click the element you want to animate.</li> <li>Click the animation halo-button <img alt="" src="/public/halo/halo-button-animations-new.png" style="width: 20px; height: 20px;" /></li> <li>Select the animation type you want</li> <li>Optional: you can customize the <strong>duration</strong>, and <strong>delay</strong> of the animation. You can also choose to animate the element at <strong>the same time with the previous element</strong> or <strong>after a previous element's animation is done</strong>. There is also an option to <strong>start the animation after a feedback form has been submitted</strong>.</li> </ol> <h2>List of animation types</h2> <h3>Appearance effects</h3> <table class="animations"> <tbody> <tr> <th>Name</th> <th>Direction</th> <th>Options</th> <th>Description</th> </tr> <tr> <td>Move in</td> <td>From left<br /> From right<br /> From top<br /> From bottom</td> <td>Fade in<br /> Bounce</td> <td>Moves the element in view from the top, bottom, left or right.</td> </tr> <tr> <td>Fade in</td> <td> </td> <td> </td> <td>Fades the element into view in place.</td> </tr> <tr> <td>Zoom</td> <td>Enlarge<br /> Enlarge and rotate left<br /> Enlarge and rotate right<br /> Shrink<br /> Shrink and rotate left<br /> Shrink and rotate right</td> <td>Bounce</td> <td>The element gets enlarged or shrinks down. </td> </tr> <tr> <td>Flip in</td> <td> </td> <td>Vertical<br /> Horizontal</td> <td>Twists the element around the z-axis whilst fading the element in.</td> </tr> <tr> <td>Roll in</td> <td> </td> <td> </td> <td>The element fades and rotates in place. Very nice with a sequence of elements from left to right.</td> </tr> <tr> <td>Drop</td> <td> </td> <td> </td> <td>Element drops from the top, with a big rubber bounce.</td> </tr> <tr> <td>Lightspeed</td> <td>From left<br /> From right</td> <td> </td> <td> </td> </tr> <tr> <td>Dispense<a href="#clipping" style="text-decoration: none;"><sup>*</sup></a></td> <td>From left<br /> From right</td> <td>Bounce</td> <td>The element slides in view from a hidden origin. Like how a receipt is dispensed from a thermal printer. Nice in combination with for instance a vertical line.</td> </tr> <tr> <td>Wipe<a href="#clipping" style="text-decoration: none;"><sup>*</sup></a></td> <td>From left<br /> From right<br /> From top<br /> From bottom</td> <td> </td> <td>The element starts invisible and starts to show according to the wiping direction.</td> </tr> <tr> <td>Appear</td> <td> </td> <td> </td> <td>Only shows the element when certain conditions are met.</td> </tr> </tbody> </table> <h3>Attentive effects</h3> <table> <tbody> <tr> <th>Name</th> <th>Direction</th> <th>Options</th> <th>Description</th> </tr> <tr> <td>Flashing</td> <td> </td> <td> </td> <td>Blinks the element twice (note that the element does not get hidden before the animation).</td> </tr> <tr> <td>Pop</td> <td> </td> <td> </td> <td>Pops in and out (enlarges and shrinks a few times).</td> </tr> <tr> <td>Pulsation</td> <td>Three times<br /> Bigger/harder</td> <td> </td> <td>Scales the element slightly before returning to its original position. It can also pulse three times (more attention) and pulse bigger/harder (enlarge more between pulses).</td> </tr> <tr> <td>Swinging</td> <td> </td> <td> </td> <td>Swings the element.</td> </tr> <tr> <td>Tada</td> <td> </td> <td> </td> <td>Tada!</td> </tr> <tr> <td>Wobbling</td> <td> </td> <td> </td> <td>Wobble, wobble.</td> </tr> <tr> <td>Subtle</td> <td>From left<br /> From right</td> <td>Fade</td> <td>The element has a very subtle movement and scales slightly, similar to the <a href="https://en.wikipedia.org/wiki/Ken_Burns_effect" target="_blank">Ken Burns effect</a>. Good for large photography to give some depth to your publication.</td> </tr> <tr> <td>Float</td> <td>Float to left<br /> Float to right<br /> Play infinitely<br /> Bigger/harder</td> <td> </td> <td>The element floats a little bit up and down, left or right according to the direction.</td> </tr> </tbody> </table> <h3><a id="clipping" name="clipping">Animation clipping</a></h3> <p><sup>*)</sup> The Dispense and Wipe animations use clipping to create these effects. Please keep this in mind when using these animation types, as content that sticks out of an animating section will not be visible during or after animations</p> <h3>Credits</h3> <p>Some of these animations were originally authored by third parties:</p> <ul> <li><a href="http://daneden.github.io/animate.css/">Animate.css by Daniel Eden</a></li> <li><a href="https://github.com/nickpettit/glide">Glide by Nick Petitt</a></li> </ul> </section> <div class="last-modified">Last modified: <time>Monday, 22 July 2024 - 10:17:43 CEST</time></div> </article> <nav class="breadcrumbs"> You are here: <a href="/">H5mag User Guide</a> > <a id="breadcrumbs-2" class=" main mainactive" href="/basics">Basics</a> > Animations </nav> </main> </div> <!-- Piwik --> <script type="text/javascript"> var _paq = _paq || []; _paq.push(["trackPageView"]); _paq.push(["enableLinkTracking"]); (function() { var u=(("https:" == document.location.protocol) ? "https" : "http") + "://piwik.schuttelaar.net/"; _paq.push(["setTrackerUrl", u+"piwik.php"]); _paq.push(["setSiteId", "30"]); var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript"; g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Piwik Code --> </body> </html>