Element Advanced Settings: Animation

In this article, we will review the Animation feature included under Advanced Settings for some elements (please refer to the supported elements section of this article). The Animation section will allow you to add different animations to your elements.

Important note: Animation settings must be enabled by clicking the toggle.

Requirements: 

• An active ClickFunnels 2.0 account
• A ClickFunnels page
• Any of the elements mentioned in the Supported Elements section

TABLE OF CONTENTS

• Style:
• Trigger:
• Timing function:
• Play direction:
• Duration:
• Delay:
• Only animate once:
• Loop:
• Preview Animation:
• Supported Elements:

Style:

The style feature will set the style of your animation. You can choose from 17 animation styles to add to your element.

Back to Top

Trigger:

You can trigger your animation with a specific action with the trigger feature. You can decide whether to load it immediately on page load by selecting “On Page Load”; after the element becomes visible, by selecting “On page scroll,” or set it to not load at all by selecting the “None” option.

Back to Top

Timing function:

The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle. The differences can be subtle, especially if the animation duration is short, but you can see a pronounced difference if you increase the time.

Back to Top

Play direction:

The play direction feature allows you to change how your animation plays. It could be Normal to see the animation playing forward, Reversed to invert the animation play;  Alternate will play it usually, and then Reversed (looks excellent on animation loops); and Alternate reverse will start with a Reversed animation and then play a Normal animation.

Please note that Alternate and Alternate reverse animation options will work better with the Loop option enabled.

Back to Top

Duration:

The Duration feature will change the animation's total duration. 

Back to Top

Delay:

The delay feature will create a delay in starting the animation.

Back to Top

Only animate once:

The only animate once feature will make the animation only play once.

Back to Top

Loop:

The animation loop feature will make the animation loop as long as you have the page open.

Back to Top

Preview Animation:

The preview animation button will let you preview your current animation without going back and forth to the Live page to see the results; this is great for adjusting the animation settings to your needs without leaving the editor.

Back to Top

Supported Elements:

This setting can be found in the following Elements: 

• General: Headline
• General: Sub Headline
• General: Paragraph
• General: Bullet List
• General: Image
• General: Video
• General: Video Pop up
• General: Button
• General: Select Box
• General: Audio
• General: Input
• General: Icon
• General: Divider
• General: Navigation
• General: Link
• General Custom JS/HTML
• General: Breadcrumbs
• General: Textarea
• General: Countdown
• Order: Summary
• Order: Confirmation
• Order: Checkout
• Order: Checkout 2 step
• Blog: Link
• Blog: Author
• Blog Categories: Name
• Blog Categories: Link
• Blog Categories: Categories
• Blog Posts: Name
• Blog Posts: Summary
• Blog Posts: Link
• Blog Posts: Publish Date
• Blog Post: Image
• Blog Post: Collection
• Blog Posts: Category
• Blog Posts: Author
• Download: Title
• Download: Link
• Download: Image
• Download: Collection
• Course: Name
• Course: Link
• Course: Publish Date
• Course: Description
• Course: Image
• Course: Collection
• Course: Podcast Link
• Course: Contact Profile
• Course: Sidebar
• Course Modules: Name
• Course Modules: Description
• Course Modules: Link
• Course Modules: Image
• Course Modules: Publish Date
• Course Modules: Collection
• Course Modules: Podcast Link
• Course Lessons: Name
• Course Lessons: Link
• Course Lessons: Image
• Course Lessons: Audio
• Course Lessons: Video
• Course Lessons: Publish Date
• Course Lessons: Collection
• Products: Name
• Products: Description
• Products: Price
• Products: Image
• Products: Link
• Products: Collection
• Flex Containers
• Component: Image Setting 
• Component: Hamburger Icon 
• Component: Overlay
• Component: Submenu Settings 
• Component: Time 
• Component: Time Container 
• Component: Countdown Container 
• Component: Label 
• Component: Summary Header 
• Component: Summary Products 
• Component: Product Info 
• Component: Customer Info 
• Component: Header Styles 
• Component: Text Style 
• Component: Summary Footer 
• Component: Summary Total 
• Component: Confirmation Header 
• Component: Confirmation Products 
• Component: Confirmation Footer 
• Component: Price Settings 
• Component: Confirmation Total 
• Component: Header Styles 

Back to Top