How to Enable Interactions?

In TheGem Elementor

  1. Select the content element where you wish to enable interactions
  2. Go to “Advanced” tab
  3. Open “TheGem Options” section
  4. Scroll down to “Interactions” group of controls

Here you can enable:

  • Vertical Scroll
  • Horizontal Scroll
  • Mouse Effects

In TheGem WPBakery

  1. Edit the content element where you wish to enable interactions
  2. Go to “Interactions” tab

Here you can enable:

  • Vertical Scroll
  • Horizontal Scroll
  • Mouse Effects

Note: in case of complex layouts with many content elements and exotic positioning of this elements on page (off-grid, overlapping etc.) we would recommend to use backend editor of WPBakery page builder to add and edit interactions.

Vertical Scroll

With this effect you can make your content move vertically at a different speed while scrolling the page. You can make following settings:

  • Direction: Specify the moving direction
  • Speed: Specify the moving speed
  • Viewport: Specify the starting and ending position within the viewport
  • Apply Effects On: Specify screen sizes / devices where the effect should be enabled

Horizontal Scroll

This interaction animates your content in the horizontal directions while scrolling the page.

  • Direction: Specify the moving direction
  • Speed: Specify the moving speed
  • Viewport: Specify the starting and ending position within the viewport
  • Apply Effects On: Specify screen sizes / devices where the effect should be enabled

Diagonal Scroll

By combining both vertical and horizontal scroll effects you can create different angles for moving your object / content element.

Mouse Effects

Mouse track effect makes a content element to move in relation to the user’s mouse movement. Depending on the movement of mouse cursor your content reacts and moves up, down, left right, creating a sense of depth.

  • Direction: Specify the moving direction
  • Speed: Specify the moving speed