Streaming live at 10am (PST)

How to create this Animation


#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='/uploads/webflow1/3610/4f0ecee585126b4a.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.

http://greensock.com/drawSVG

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.


#5