Streaming live at 10am (PST)

How to create this Animation

Hi All,
I found this project on the discover section:

I wasn’t able to understand how he made al the icons get the “drawn” effect when scrolling or hovering.

how is this done?

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='//'>);
>   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]

Awesome Thanks for the detailed explanation!

@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.