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='//discourse-cloud-file-uploads.s3.dualstack.us-west-2.amazonaws.com/business5/uploads/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]

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.