1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Delay a bit the svg on scroll animation and not straight after they appear on screen

Discussion in 'JavaScript' started by stylianos, Jul 13, 2017.

  1. #1
    i am currently developing a website where i used some svg technology! However, i have some svg icons that are animated on scroll but this happens as soon as they appear on the screen! The problem is that i need these icons to appear on the screen and instead of getting triggered straight away i need it to wait for the user to scroll i little bit more and then start animating! this is the js i used:

    $(window).scroll(function() {

    drawLines();

    });
    function drawLines(){

    $.each($(".red-line"), function(i, val){

    var line = val;

    drawLine($(this), line);

    });
    SEMrush
    }
    function drawLine(container, line){

    var length = 0;

    var pathLength = line.getTotalLength();

    var distanceFromTop = container.offset().top - $(window).scrollTop();

    var percentDone = 1 - (distanceFromTop / $(window).height());

    length = percentDone * pathLength;

    line.style.strokeDasharray = [length,pathLength].join(' ');

    }
     
    stylianos, Jul 13, 2017 IP
    SEMrush