×

Element Advanced Settings: Animation

Modified on Mon, 27 Nov, 2023 at 10:08 AM

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:

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

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article