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.

Group Animations

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).

Animation Settings

The settings and customizations vary depending on the type of animation and trigger that you choose for an element:

Duration - specifies how long the animation should last. Increasing the duration will make the animation slower, a duration value closer to zero means the animation will be very short and quick.

Delay - specifies when the animation will start. Setting your delay property to 0.2 sec means your animation will start in 0.2 sec, setting it to 0 sec means your animation will start immediately.

Easing - specifies the speed at which an animation progresses. You can think of easing as acceleration or deceleration. E.g: An element that moves from one side to the other side can start off slowly, then build up speed, and then stop suddenly.

Scroll Start & Scroll Finish - defines the starting area of your scrolling animation. The scroll animation will play as you scroll from the “Start” handle to the “Finish” handle. Adjust by moving them vertically, save and hit the “Preview” button to test the results.

Opacity (with 'Fade in' animation selected) - defines the initial state of your Fade in animation. If set to zero the element will not be visible until the trigger is activated. If set to 100(max value) the element will be opaque and the fade in effect won’t be noticeable.

Opacity (with 'Fade out' selected) - defines the end state of your Fade Out animation. If set to zero the element will fade out & disappear completely. If set to 100 the element will be opaque and the fade out effect will not be noticeable.

Zoom (with 'Zoom in' selected) - with this animation applied, the element increases in size. If zoom property is set to 120 it means your element will zoom in with 120% from its initial state.

Zoom (with 'Zoom out' selected) - the element decreases in size. If zoom property is set to 80 it means your element will zoom out with 80% from its initial state.

Zoom (with 'Appear & Zoom in') - the element will appear and start increasing in size. The zoom property specifies the starting point of your zoom in animation. If zoom property is set to 20 it means your element will start to zoom in from 20% of its initial state.

Zoom (with 'Appear & Zoom out') - the element will appear and start decreasing in size. The zoom property specifies the starting point of your zoom out animation. If property is set to 120 it means your element will appear & will start zooming out from 120% of its initial state.

Travel - defines the distance(in px) of your animation.

Use the tooltips inside the builder for a quick note on each of the settings: