Get Elements Hive

WebGL Media Hover Distortion

The WebGL Media Hover Distortion element in an Interactive WebGL Element which allows you to swap 2 images, 2 videos, or a combination of both using an image-based distortion effect on hover.

 

Content Tab

Media

  • Default Media: The default image or video
  • Hover Media: The image or video shown on hover
  • Size: The media size to use

 

Distortion Map

  • Default Distortions: List of the default distortion effects
  • Use Custom Distortion Image: Use a custom image for the distortion effect instead of the default distortions
  • Custom Distortion Image: The image to use for the distortion effect

 

Distortion Effect

  • Distortion Angle: The angle of the distortion
  • Distortion Intensity: The intensity of the distortion
  • Hover In Duration: The duration of the effect when switching to the Hover Media
  • Hover Out Duration: The duration of the effect when switching back to the Default Media
  • Easing: The easing function to use for the distortion effect

 

Design Tab

 

Media

  • Width: The width of the media container
  • Height: The height of the media container
  • Border Radius: The border radius of the media container