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.
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.
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.
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.
Duration:
The Duration feature will change the animation's total duration.
Delay:
The delay feature will create a delay in starting the animation.
Only animate once:
The only animate once feature will make the animation only play once.
Loop:
The animation loop feature will make the animation loop as long as you have the page open.
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.
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
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article