Element Glitch tutorial Webflow

Andrew McGrath
Andrew McGrath
Published on
September 4, 2022
Estimated read time
5
 minute read
Andrew McGrath
Published on
September 4, 2022
Estimated read time
5
 minute read

This article outlines how to create the glitch effect on hover seen on our Karpi Studio client West Stringfellow' website at: https://we.st/ Homepage, when hovering over the rocket and VR head.

How to create

To achieve this effect, we need to create 2 other variants of the original image, one green and one red. On hover the interaction will quickly flicker between the 3 several times over with some blur then come full circle back to the original.

Set up the image layers

Duplicate the image you wish to apply the effect to twice, we are going to create the green and red versions first, then set up the interactions.

Statue images we used

Set the position of both to ‘Absolute’ and ensure it is set to ‘Full'. This ensures the image is filling the same space as the original. Ensure the Z-index is higher than the original so that the 2nd image is on top, so that we can see it for editing purposes.

Set some settings to the images

Scroll down the inspector panel on the right hand side to ‘Filters' and depending on your original image apply filters to adjust it to a bright turquoise green you are happy with.

Setting filters to get bright turquoise green version

Repeat this step for the red version, Z-index to adjust where the image is so that you can see it for editing purposes.

Setting filters to get red version

Then set the red image layer to a Z-index of ‘-2’ and the blue layer to ‘-1’. The original image Z-index should be blank or set to '0':

set up z index of red image layer

You should now have 3 versions of the image:

  1. The original
  2. Red version
  3. Green version

With the red & green versions behind the original in Z-index order.

Set up the interaction on hover

Next we need to turn these 3 images into the glitch on hover interaction.

Select the original top image and set up a new hover interaction:

setting up hover to the original top image
Creating new animation

Next set up 3 new starting animations for Blur filter, opacity and move. Check the box for each of ‘Set as initial state’. Blur filter set to 0px, Opacity at 100% and move at 0,0,0.

Set up 3 new starting animations for Blur filter

Next lets set up moves for each coloured layer that moves it horizontally and vertically by a few pixels and another one that increases the original image filter blur from 0px to 2px

set up moves for each coloured layers

Then let's move the red layer by -8px to offset it from the original. All interaction layers should have super short durations between 0.01 or 0.02, this ensures that they flicker rapidly.

set up move for red layer

Repeat this for the green layer:

set up move for green layer

then for the original image layer set the opacity to 0, set up more layers that toggle the opacity between 100% and 0 once more.

set the opacity for original image layer

Between this we move the red around and have it finally for the last move set back to 0px:

set some last moves for red layer

and same for the green layer:

set some last moves for green layer

Add a final filter towards the end that brings the blur back to 0px:

adding final filter

Play the interaction to see how it looks and tweak the timing and move properties until you’re happy with it.

Found this article helpful? Check out our agency site at: www.karpi.studio

and our other tutorial articles here


Ready to get started?

We specialise in profit generating websites that tell your story, increase your conversions and educate your audience. Reach out to the team today to discuss your project with us.

Contact us