CODEWITHSUNDEEP
javascriptjquerysvg
Mikhail Kolpakov
Mikhail Kolpakov

Reputation: 47

SVG animation on scroll?

I have a small svg:

<svg xmlns="http://www.w3.org/2000/svg" width="164.969" height="195">
        <path d="M164.979 28.97a3.675 3.675 0 0 1-6.19 2.66 90.127 90.127 0 1 0-.99 132.64 3.685 3.685 0 0 1 4.95 5.46 97.5 97.5 0 1 1 1.07-143.48 3.656 3.656 0 0 1 1.16 2.72z" fill="url(#linear-gradient)" fill-rule="evenodd"></path>
        <linearGradient id="linear-gradient">
            <stop offset="0%" stop-color="#e87975"></stop>
            <stop offset="100%" stop-color="#f3c7a1"></stop>
        </linearGradient>
    </svg>

I wonder if it possible to somehow fill the white background with linear gradient on scroll from top start to bottom end? Unfortunately I found only drawing examples on intentet and my small expericence in jQuery doesn't give me a chance to do it by myself. Thank you!

Upvotes: 0

Views: 991

Answers (1)

Arek
Arek

Reputation: 89

For the Background stuff look at this: How to create gradient color in svg background

For scrolling, this could be helpfull: http://cbron.github.io/blog/2013/12/30/draw-svg-path-on-scroll-tutorial/

Anyway: Instead of jQuery you should try Snap.svg for manipulating your SVG.

Upvotes: 1

Related Questions