Blocksify Pro adds six interaction triggers to the Block Animation controls provided by the free Blocksify plugin.
Use this reference after learning the two entrance triggers in Block animations and interactions. The Pro triggers respond to a visitor’s pointer, click, position on the page, or visible Slider slide.
Where to find it
- Open a page in the editor and select a supported Blocksify block, such as a Section.
- Open the Interactions panel in the block settings sidebar.
- In Block Animation, click Add Animation Trigger. On Scroll Out, Scroll Position, Mouse Move, On Hover, On Click, and On Slide Active appear with the free choices.
Section, Container, and Content Loop support these controls. A Content Loop also provides a Target choice for the loop, each card, or its media area.
On Hover
On Hover plays an entrance-style effect whenever the pointer enters the block. Leaving the block stops the current motion and returns it to its normal appearance.
| Setting | Description |
| Effect | Chooses Fade, Slide, Zoom, Flip, Reveal, Bounce, or Mask Wipe. |
| Direction | For Slide, chooses Up, Down, Left, or Right. |
| Duration | Sets the playback time in milliseconds. The value starts at 300, cannot be below 0, and adjusts in 50-millisecond steps. |
| Easing | Chooses Smooth, Linear, Ease In, Ease Out, Ease In-Out, Back Out, or Back In-Out. |
| Trigger on | Enables the response with Desktop, Tablet, and Mobile device buttons. |
On Click
On Click plays the selected entrance-style effect each time a visitor clicks the block. It is useful for a contained visual response on an interactive card or call to action.
| Setting | Description |
| Effect | Chooses the motion played after each click. |
| Direction | Appears only for Slide and chooses Up, Down, Left, or Right. |
| Duration | Sets the playback time in milliseconds, starting at 300, with a minimum of 0 and 50-millisecond steps. |
| Easing | Changes the pace of the motion. |
| Trigger on | Chooses which device classes respond to a click. |
On Scroll Out
On Scroll Out keeps the block in its normal state while it is in view, then plays an exit effect when it leaves. The block must first become at least halfway visible.
| Setting | Description |
| Effect | Chooses how the block leaves view as it scrolls out. |
| Direction | For Slide, chooses the exit direction. |
| Duration | Sets the exit time in milliseconds. The default is 600; the minimum is 0. |
| Delay | Waits before the exit begins. The default is 0, with a minimum of 0 and 50-millisecond steps. |
| Easing | Controls the change of speed during the exit. |
| Trigger on | Limits the exit effect by device class. |
Scroll Position
Scroll Position changes one or more visual properties continuously as the block travels through the viewport. Build a practical example in Build a scroll-position effect.
| Setting | Description |
| Start | Sets where the changes begin from 0 to 100 percent, in 5-percent steps. |
| End | Sets where the changes finish from 0 to 100 percent, in 5-percent steps. |
| Smooth | On softens updates between scroll positions; Off follows them directly. |
| Scroll Properties | Adds Vertical Move, Opacity, Rotate, Scale, or Blur. Each property has From and To values. |
| Trigger on | Limits the changing properties by device class. |
Mouse Move
Mouse Move makes the block follow pointer movement or tilt in three dimensions. It returns to its centred position when the pointer leaves.
| Setting | Description |
| Mode | Track moves the block horizontally and vertically. 3D Tilt rotates it toward the pointer. |
| Strength | Sets the response from 0 to 100 in steps of 1. Track uses the number as the maximum movement in pixels; 3D Tilt uses a smaller proportional angle. |
| Trigger on | Enables the pointer response on Desktop, Tablet, Mobile, or a combination. |
On Slide Active
On Slide Active (slide-active) replays an entrance each time the block’s containing slide enters the visible set. It resets the block to its entrance starting state after the slide leaves, ready for the next visit.
Opening the On Slide Active row launches the adjacent popover shown above, with Effect, Type, Duration, Delay, Easing, Trigger on, and Preview Animation. Preview Animation is not shown inline in the collapsed trigger row.
| Behavior | What happens |
| Supported blocks | The trigger works on any block that provides Block Animation controls except the Slider parent itself. Inside a Slide, it can animate the Slide or a supported inner block. |
| Visible set | Every visible slide enters together when the Slider shows several columns, so animated content in each visible slide plays rather than only content in the current slide. |
| Leaving a slide | The entrance stops and returns to its starting state after the slide is no longer visible. |
| Editor preview | Use Preview Animation to check the entrance. Browsing the static Slider canvas does not replay it. |
Follow Build a hero slider to add the trigger to each property heading. If the block is no longer inside a Slide, its entrance runs once instead of remaining hidden.
Effects and easing
- Fade changes opacity.
- Slide combines fading with movement from Up, Down, Left, or Right.
- Zoom combines fading with a scale change.
The full Effect list is Fade, Slide, Zoom, Flip, Reveal, Bounce, and Mask Wipe. Flip, Reveal, Bounce, and Mask Wipe currently play as a plain fade, so use Fade, Slide, or Zoom when the published motion needs to match the name you selected.
The Easing choices are Smooth (default), Linear, Ease In, Ease Out, Ease In-Out, Back Out, and Back In-Out. Back choices can briefly move beyond the resting point, while Linear keeps a constant pace. Although the editor accepts a Duration of 0, the published page plays it as 600 milliseconds; use 50 for the shortest consistent setting.
Trigger on
Every Pro trigger includes Trigger on controls for Desktop, Tablet, and Mobile. All three start enabled; turn off a device when motion would distract, crowd a small screen, or rely on a pointer that may not be present.
If a visitor asks their browser to reduce motion, the block stays in its normal visible state. Device trigger gates control motion only; use visibility conditions when the block itself should appear only for selected visitors or pages.