How to create this Animation

Design help General
1

Hi All,
I found this project on the discover section:
https://webflow.com/website/Bauhem-Studio
I wasn’t able to understand how he made al the icons get the “drawn” effect when scrolling or hovering.

how is this done?

2

The “drawing” is actually displaying a gif image within a DIV. This is the picture:

In the div there’s a header:

class="heading-bauhem services editable"

which is loaded like this:

> .branding-gif {
>   display: inline-block;
>   width: 200px;
>   height: 187px;
>   background-image: url(<img src='//cdck-file-uploads-us1.s3.dualstack.us-west-2.amazonaws.com/webflow1/original/2X/b/bef3ad082119d1f7cd8cfb653c523e68f4aadaa1.gif'>);
>   background-position: 29% 1px;
>   background-size: 200px;
>   background-repeat: no-repeat;
> }

So the drawing is actually the background image-gif activated by hover / click. [that’s probably set with an interaction in WF]

3

Awesome Thanks for the detailed explanation!

4

@Aviry - if you are interested in a JS approach to creating and animating this type of effect on a large scale project check out the new DrawSVGPlugin from Greensock. I haven’t upgraded my plan with them to a paid membership yet, but it is a pretty slick and powerful approach to animating SVG.

Note that the only snag with Webflow & Greensock is that Greensock frequently uses camelCase syntax for classes where Webflow converts to lowercase and hyphens. A hyphen in a class is seen as an operator (subtract) frequently in JS. If you use all lowercase in both, I think they should play well with each other. Just getting started myself.