Streaming live at 10am (PST)

Jquery Script Question - animating on view


#1

Question for any jquery ninjas out there. So I'm working with this script that creates a triangle that has an animated fill essentially, but I need the animation in the triangle to animate only once it is in view & i've accomplished that but can't seem to get it to only trigger the animation itself only once when it first comes into view, not continually as the user continues to scroll. (ignore that everything is called as a #circle in the scripting, the triangle use to be a circle before I got to it lol)
https://webflow.com/design/j-portfolio?preview=0ff9a8394fe03cb6bfba1f2ee8bc583b

Live link here: http://j-portfolio.webflow.com/

any help is appreciated smile

Code in the dashboard section:

    <script src="http://jaidenleach.com/js/circle-progress.js"></script>

<script>
$(function() {
    var oTop = $('#circle').offset().top - window.innerHeight;
    $(window).scroll(function(){

        var pTop = $('body').scrollTop();
        console.log( pTop + ' - ' + oTop );   //just for your debugging
        if( pTop > oTop ){
            start_animation();
        }
    });
});

function start_animation(){
    $('#circle').circleProgress({
    value: 1,
    size: 200,
    thickness: 10,

    drawFrame: function(v) {
        var ctx = this.ctx,
            s = this.size,
            r = this.radius * 0.9,
            t = this.getThickness(),
            da = Math.PI / 3,
            dx = r / 10,
            dy = r / 10 + 25,
            lc = 'butt',
            lj = 'miter';

        this.lastFrameValue = v;
        ctx.clearRect(0, 0, this.size, this.size);
        ctx.lineWidth = t;
        ctx.lineJoin = lj;
        ctx.lineCap = lc;

        function getX(angle) {
            return r * (1 + Math.cos(angle));
        }

        function getY(angle) {
            return r * (1 + Math.sin(angle));
        }

        var a1 = -Math.PI * 5 / 6 + da,
            x1 = getX(a1) + dx,
            y1 = getY(a1) + dy;

        var a2 = -Math.PI / 6 + da,
            x2 = getX(a2) + dx,
            y2 = getY(a2) + dy;

        var a3 = Math.PI / 2 + da,
            x3 = getX(a3) + dx,
            y3 = getY(a3) + dy;

        // Draw "empty" path
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.lineTo(x3, y3);
        ctx.closePath();
        ctx.strokeStyle = this.emptyFill;
        ctx.stroke();
        ctx.restore();

        // Draw "filled" path
        ctx.save();
        ctx.beginPath();

        var p0 = 0.96;
        ctx.moveTo(
            x1 * p0 + x3 * (1 - p0),
            y1 * p0 + y3 * (1 - p0)
        );

        ctx.lineTo(x1, y1);

        var p1 = v > 1 / 3 ? 1 : v * 3;
        ctx.lineTo(
            x2 * p1 + x1 * (1 - p1),
            y2 * p1 + y1 * (1 - p1)
        );

        if (v > 1 / 3) {
            var p2 = v > 2 / 3 ? 1 : v * 3 - 1;
            ctx.lineTo(
                x3 * p2 + x2 * (1 - p2),
                y3 * p2 + y2 * (1 - p2)
            );
        }

        if (v > 2 / 3) {
            var p3 = v * 3 - 2;
            ctx.lineTo(
                x1 * p3 + x3 * (1 - p3),
                y1 * p3 + y3 * (1 - p3)
            );
        }

        if (v >= 1)
            ctx.closePath();

        ctx.strokeStyle = this.arcFill;
        ctx.stroke();
        ctx.restore();
    }
});
}





</script>

If memory serves, @bartekkustra, you're a magical unicorn when it comes to JS.


#2

Without reading the entire code... Did you try having a flag? wink

didYouRun = false;

Then when you trigger the animation check if the flag is false. If it it, then run your code. At the end of your code remember to set the flag to true.

didYouRun = true;

You're welcome.


#3

Hmm good idea, I don't work with raw jquery on a personal level all that much ... would you be able to tell me where/how to make use of this by any chance, does the flag work as a wrapper? function? Am I way off base?


#4

That should do the trick ;) I'm not sure as I haven't tested it.

<script src="http://jaidenleach.com/js/circle-progress.js"></script>
<script>
$(function() {
    animFlag = false;
    var oTop = $('#circle').offset().top - window.innerHeight;
    $(window).scroll(function(){
        if(!animFlag) {
            var pTop = $('body').scrollTop();
            console.log( pTop + ' - ' + oTop );   //just for your debugging
            if( pTop > oTop ){
                start_animation();
            }
        }
    });
});

function start_animation(){
    $('#circle').circleProgress({
        value: 1,
        size: 200,
        thickness: 10,

        drawFrame: function(v) {
            var ctx = this.ctx,
                s = this.size,
                r = this.radius * 0.9,
                t = this.getThickness(),
                da = Math.PI / 3,
                dx = r / 10,
                dy = r / 10 + 25,
                lc = 'butt',
                lj = 'miter';

            this.lastFrameValue = v;
            ctx.clearRect(0, 0, this.size, this.size);
            ctx.lineWidth = t;
            ctx.lineJoin = lj;
            ctx.lineCap = lc;

            function getX(angle) {
                return r * (1 + Math.cos(angle));
            }

            function getY(angle) {
                return r * (1 + Math.sin(angle));
            }

            var a1 = -Math.PI * 5 / 6 + da,
                x1 = getX(a1) + dx,
                y1 = getY(a1) + dy;

            var a2 = -Math.PI / 6 + da,
                x2 = getX(a2) + dx,
                y2 = getY(a2) + dy;

            var a3 = Math.PI / 2 + da,
                x3 = getX(a3) + dx,
                y3 = getY(a3) + dy;

            // Draw "empty" path
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.lineTo(x3, y3);
            ctx.closePath();
            ctx.strokeStyle = this.emptyFill;
            ctx.stroke();
            ctx.restore();

            // Draw "filled" path
            ctx.save();
            ctx.beginPath();

            var p0 = 0.96;
            ctx.moveTo(
                x1 * p0 + x3 * (1 - p0),
                y1 * p0 + y3 * (1 - p0)
            );

            ctx.lineTo(x1, y1);

            var p1 = v > 1 / 3 ? 1 : v * 3;
            ctx.lineTo(
                x2 * p1 + x1 * (1 - p1),
                y2 * p1 + y1 * (1 - p1)
            );

            if (v > 1 / 3) {
                var p2 = v > 2 / 3 ? 1 : v * 3 - 1;
                ctx.lineTo(
                    x3 * p2 + x2 * (1 - p2),
                    y3 * p2 + y2 * (1 - p2)
                );
            }

            if (v > 2 / 3) {
                var p3 = v * 3 - 2;
                ctx.lineTo(
                    x1 * p3 + x3 * (1 - p3),
                    y1 * p3 + y3 * (1 - p3)
                );
            }

            if (v >= 1)
                ctx.closePath();

            ctx.strokeStyle = this.arcFill;
            ctx.stroke();
            ctx.restore();
        }
    });
    animFlag = true;
}
</script>

#5

djkfghkdfjghhkdjfg. You're the best. It works like a charm!



(it's now official, I've taken the unicorn thing too far.)


#6

I'm happy I could have helped you :)`


#7

Hehe thanks again mate +1 100


#8

#9