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


  • 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



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