Fluid Dynamics Quick Start
Learn how to add ultra-smooth WebGL fluid simulations to your modules.
Table of Contents
What is Fluid Dynamics?
The Fluid Dynamics addon [?]
Addons extend the functionality of Slider Revolution, adding new controls to the module editor and allowing you to do extra things with your design.
For example, using the particle addon you can create effects such as falling snow, and using the distortion addon you can create shimmering effects such as simulating being underwater.
There are dozens of addons available, all included with the full version of Slider Revolution. uses WebGl to add cloud-like fluid simulations to your modules.
These fluid simulations can either respond to mouse movement or run independently, include physics interactions, and can have their color fully controlled:
In this guide, we’ll learn how to get started with the Fluid Dynamics addon and add it’s visual effects into your modules [?]
A module in Slider Revolution acts as a container for slides, which in turn act as containers for layers. Modules are created and edited with the module editor.
A "module" is a single, self contained piece of content. You can think of this as being similar to the way a post or page in regular WordPress is a self contained piece of content.
A module can represent any kind of content Slider Revolution is capable of creating, such as a slider, carousel, hero unit, navigation menu, posts display and so on.
Multiple modules can be combined to form rich content such as complete sites and landing pages. in no time at all.
Getting Started
The first thing you’ll need to do is install and enable the Fluid Dynamics addon.
The process for doing this is the same as with all addons, so please begin by following the steps laid out in our guide on how to Browse, Install and Enable Addons.
Add a “Fluid Dynamics” Layer
Each fluid dynamics effect occupies its own dedicated layer [?]
Layers are containers for visual, audio or layout items and are added to slides. For example, text, button, image, audio, video, group and row are all types of layers.
Layers are added to slides via the module editor..
To add a fluid dynamics layer to a module, in the module editor [?]
The "Module Editor" is the tool used to create & modify modules.
Through this visual, drag & drop, no-code interface you can add various types of layers, animation and special FX to your modules, as well as managing slides and configuring options. go to Add Layer in the top menu, then click Fluid Dynamics:
A rectangular shape with a default fluid dynamics layer inside it will be added to the canvas [?]
The canvas is the point and click design space in the module editor. It forms the largest area of the module editor.
In this area layers can be selected, moved and resized. Animations can also be previewed.. You will also see a corresponding track [?]
A track is one of the horizontal spaces in the module editor's timeline. It is the representation of a layer within that timeline, used for controlling the animations and sorting order position of that layer. appear in the timeline [?]
The timeline is the section of the module editor dedicated to animation and controlling the stacking order of layers.
From this part of the editor animations can be added, adjusted and previewed. Additionally, layers can be selected from the timeline, and can be dragged and dropped up and down on the timeline to modify which appear in front and which behind.
It can be equally compared to both a timeline in a typical video editing application, and a layers panel in a typical graphic design application:
Resize and Position the Fluid Dynamics Layer
By default, a newly added fluid dynamics layer is relatively small, and you’ll almost certainly want to resize it.
This can be done through clicking the drag handles on the corners of the shape, then clicking and dragging the shape to position it:
The Fluid Dynamics Panel
Under the Layer Options tab for any selected cluster layer, you’ll see it has a sub-section named Fluid Dynamics:
Inside that sub-section is a panel named Fluid Dynamics Setup:
Configuration options for the selected fluid dynamics layer are available within this panel and those below it.
Using the Fluid Dynamics FX Library
The Fluid Dynamics FX Library can be found at the top of the Fluid Dynamics Setup panel:
Click to expand the library and you will see it contains an area for ready-made fluid dynamics effects, named Default Presets, and an area in which you can save your own Custom Presets:
Applying Presets:
To apply a preset all you need to do is expand either Default Presets or Custom Presets, then click the name of the FX preset you want to use:
You should then see your selected fluid dynamics FX preset animating on the canvas:
Up Next: Customizing Fluid Dynamics FX
You’ve just seen how quickly you can add fluid dynamics FX presets to your module design. However if you want to go beyond presets you can also customize a fluid dynamics effect’s color, timing, movement, interactivity, and a whole lot more.
We’ll dig into all the extra controls you have over the appearance of fluid dynamics layers in the next guide, Customizing Fluid Dynamics FX.
