滚动显示SVG动画

Question

I'm animating an SVG line based on my scroll position. It works but the FPS is really low and the animation itself is laggy. I pretty sure it's my native Javascript skills that are screwing things up, but I don't know how to solve it.

I made a quick and dirty JSbin replica of what I currently have on the actual website;

http://jsbin.com/vigaqoxiru/edit?html,css,js,output

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(f){setTimeout(f, 1000/60)}

document.addEventListener('DOMContentLoaded', function() {
    Timeline();
});

function Timeline() {
    requestAnimationFrame(animateLine)

    function convertRange( value, r1, r2 ) { 
         return ( value - r1[ 0 ] ) * ( r2[ 1 ] - r2[ 0 ] ) / ( r1[ 1 ] - r1[ 0 ] ) + r2[ 0 ];
    }

    function animateLine() {
        var offset = window.scrollY;
        var wheight = window.innerHeight;
        var timeline = document.querySelector(".Approach--steps");
        var theight = timeline.getBoundingClientRect().top - wheight;

        if (theight < 0) {
            var timelineMin = timeline.offsetHeight;
            var objectMin = timeline.offsetTop;
            var objectMax = timeline.offsetTop + timeline.offsetHeight;

            document.querySelector(".Approach--timeline svg").setAttribute("style", "transform: scaleY(" + Math.floor(convertRange( (offset + wheight), [objectMin, objectMax], [0, 1.0]) * 100) / 100 + ")");
        }
    }

    window.addEventListener('scroll', function(){
        requestAnimationFrame(animateLine)
    });
}

As you can see it's jumpy it doesn't scroll at 60fps, altho I'm using the scale attribute, requestAnimationFrame and rounded values. Any idea what a better way of implementing this animation is? Preferably without jQuery. GSAP is okay since I'm already running it.

Answer 1

Why don't you add a transition time to make it work more smoothly?

.Approach--timeline svg {
    transition: .5s ease;
}

 window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(f){setTimeout(f, 1000/60)} document.addEventListener('DOMContentLoaded', function() { Timeline(); }); function Timeline() { requestAnimationFrame(animateLine) function convertRange( value, r1, r2 ) { return ( value - r1[ 0 ] ) * ( r2[ 1 ] - r2[ 0 ] ) / ( r1[ 1 ] - r1[ 0 ] ) + r2[ 0 ]; } function animateLine() { var offset = window.scrollY; var wheight = window.innerHeight; var timeline = document.querySelector(".Approach--steps"); var theight = timeline.getBoundingClientRect().top - wheight; if (theight < 0) { var timelineMin = timeline.offsetHeight; var objectMin = timeline.offsetTop; var objectMax = timeline.offsetTop + timeline.offsetHeight; document.querySelector(".Approach--timeline svg").setAttribute("style", "transform: scaleY(" + Math.floor(convertRange( (offset + wheight), [objectMin, objectMax], [0, 1.0]) * 100) / 100 + ")"); } } window.addEventListener('scroll', function(){ requestAnimationFrame(animateLine) }); } 

 .Approach--steps { margin-top: 600px; margin-bottom: 200px } .Approach--header { margin-top: 80px; } .Approach--step { margin-top: 500px; padding-left: 56px; } .Approach--timeline { } .Approach--timeline svg { position: absolute; margin-top: -100px; height: 100%; width: 4px; transition: .5s ease; transform: scaleY(0); transform-origin: top left; } .Approach--steps { position: relative; } 

 <div class="Approach--steps"> <div class="Approach--timeline"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"> <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse"> <stop stop-color="#22D9BC" stop-opacity="1.0" offset="0%" /> <stop stop-color="#1674F5" stop-opacity="1.0" offset="50%" /> <stop stop-color="#7D00FF" stop-opacity="1.0" offset="100%" /> </linearGradient> <rect x="0" y="0" width="1" height="1" fill="url(#grad)" id="Approach--svg" /> </svg> </div> <div class="Approach--step"> <p>1. Khaled Ipsum</p> <p>Lorem Khaled Ipsum is a major key to success. Eliptical talk. How's business? Boomin. They will try to close the door on you, just open it. You see the hedges, how I got it shaped up? It's important to shape up your hedges, it's like getting a haircut, stay fresh. Wraith talk. We don't see them, we will never see them. Life is what you make it, so let's make it. Another one. Hammock talk come soon. It's important to use cocoa butter. It's the key to more success, why not live smooth? Why live rough?</p> </div> <div class="Approach--step"> <p>2. Lion</p> <p>The ladies always say Khaled you smell good, I use no cologne. Cocoa butter is the key. Hammock talk come soon. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. Major key, don't fall for the trap, stay focused. It's the ones closest to you that want to see you fail. The key to success is to keep your head above the water, never give up.</p> </div> <div class="Approach--step"> <p>3. We the best</p> </div> </div> 

Answer 2

Here's a gist of a working GSAP example.

You mentioned you plan on adding other elements to your SVG. I would recommend you read the GSAP/SVG docs here .

When animating with GSAP, I'd pretty much always recommend using an ID selector.