Setting SVG start on scroll

Question

I have an animated timeline svg that comes on the last section.

http://chalke-design-ebbca1.webflow.io/our-process

The animation starts as soon as the page is loaded but I want to trigger it only when the users scrolls to that specific part of the page.

Can anyone help!

Thank you in advance!

I would be easier, if you could post your code instead of just linking your page. This way, one could understand your problem and possible solutions, even after the problem is solved. This site is for questions, not for projects. — Lukas Körfer, Jan 28 '17 at 13:12

score 0 · Answer 1 · edited May 23 '17 at 12:09

Perhaps you want something that is outlined in these questions: Check if element is visible on screen or Check if element is visible after scrolling, that is, you check if the element-in-question's top offset is within the screen's bounds, and then start your animation if that condition is true.

var theElementInQuestion = document.getElementById("theElementInQuestion");

if (isScrolledIntoView(theElementInQuestion)) {
    startAnimation();
}

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

Setting SVG start on scroll

1 Answers1