Animations in Flex
Welcome to Flex Animations
Ladies and gentlemen, please welcome FLEX ANIMATIONS!
A functionality that any videographer, photographer or creative business owner can use to enhance how their website looks, and create more engagement for their site visitors.
How to animate elements inside your Flex blocks
To start working with Animations inside Flex blocks, here is what you need to do:
1. Update your FlexBlock plugin. The minimum plugin version you need is 3.5.2.
As always, make sure to back up your website before updating your plugin, and clear all your cache right after the update.
Note: If you use our FloForms plugin, make sure to also update it to v1.0.31 (free) or v1.0.9(pro).
2. Open any Flex block on your website inside the Layout tab of any page.
3. Select any element inside the Flex block and click on the Animation icon (the lightning bolt in the sidebar)
4. Select the type of animation you would like to apply to the element, from the existing predefined animations. Hover over each animation icon to see a live preview:
5. Select the trigger for your animation, or the action that specifies when the animation should start:
Appear - the animation starts when the page loads and the element becomes visible
Scroll - the animation starts & progresses while you scroll through the page
Click - the animation starts when you click on the element or a group of elements
Hover - the animation starts when you hover over the element or a group of elements
6. Adjust the settings (duration, delay, opacity etc) or use the default settings & click "Save" when the animation is ready.
Animations on Mobile
If the Desktop sync is enabled - the animation properties of an element on mobile, are inherited from its desktop matching element. If you want to create a different animation on mobile, make sure to disable the desktop sync, otherwise the animation icon will not be available.
To enable the animations of a few elements all together (for hover & click triggers) - group those elements into a group using Cmd+G or the group icon.
E.g to implement a color change animation for text and a fade in animation for the shape on hover, these are the steps you need to follow:
Step 1: Enable the animation for each element separately
Select the text element, choose the Color animation type and the Hover trigger for it. Select the desired colors for default and hover state. Select the shape element. Choose the Fade in animation type, and the Hover trigger. Either leave the default opacity setting, or play with the option to get the desired effect.
Step 2: Group these 2 elements (or also add the button this this group, if you want the effect to appear on the button hover) into a group. (Cmd + G)
Group Animation Settings:
Clip Content - enable this settings if you want to clip the animation effect inside the limits of the group.
E.g. Animation with Clip Content option disabled:
E.g. Animation with Clip Content option enabled:
Play Hover Animations - this option is enabled by default. Disable it when you want to play the hover animations separately (exclude from the group animation).
Play Click Animations - this option is enabled by default. Disable it when you want to play the click animations separately (exclude from the group animation) .
Trigger Links - with this option enabled, if the group has an element with a link, the link will be triggered once you click anywhere inside the group (i.e. no need to click on that specific element with the link - which will be the case when the Trigger Links option is disabled).
The settings and customizations vary depending on the type of animation and trigger that you choose for an element: