Create an underline to circle animation as you scroll

Question

I tried to create an animation as follows:

You can see 3 steps, I want to animate them while scrolling , so that the line under the heading moves to the hamburger and creates a circle.

GIF example : https://dribbble.com/shots/1746065-Floating-burger-2-0

I created a title that scrolls with text and a div in position:absolute;for a hamburger:

jsFiddle : http://jsfiddle.net/zzcjtx5a/

Also found a similar animation : http://codepen.io/sreucherand/pen/gHDaI But, to be honest, I don't know how I should start.

Is it possible?

---

: http://jsfiddle.net/eegrsdxc/1/

Answer 1

! , :

- , !

<div class="content">

    <h2>Scroll to see the magic.</h2>

    <div class="header__fake">

        <div class="icn__wrap">
            <i class="icn__hamburger"></i>
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
                <circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
            </svg>
        </div>
        <i class="btm__border"></i>

    </div>


    <h1>Tah-da!<span>Now scroll back up.</span></h1>

</div>

Answer 2

, .

• ,

• ,

stroke-dasharray, .

, , , , / .