ScrollMagic plugin is working, but is not "tying" the animation to the scroll

I am trying to achieve an SVG text scroll with the scrollmagic plugin, one such as this:

However, when I took the sample code from here and incorperated it into my site, the SVG animation works, but the svg animation happens all at once, instead of being a 1:1 relationship with the scrolling on the window..

I would presume that there must be some sort of scene or controller property that must enable this? Here is the particular code I am using for this, cropped out of my project:


<div class="resume-block-3 container">
            <svg version="1.1" xmlns="" width="350" height="200">
                <path id="word" style="stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1009.23px; stroke-dashoffset: 1009.23px;" fill="none" stroke="#fff" stroke-width="5" d="M22.328,70.018c9.867-7.4,10.724,20.434,13.014,28.694c-0.08-9.105-1.308-31.463,11.936-31.886
                <path id="dot" style="stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44.2974px; stroke-dashoffset: 44.2974px;" fill="none" stroke="#fff" stroke-width="5" d="M247.003,38.567c-7.423,1.437-11.092,9.883-1.737,11.142c14.692,1.978,13.864-13.66,1.12-8.675"></path>

the JS:

function pathPrepare ($el) {
        var lineLength = $el[0].getTotalLength();
        $el.css("stroke-dasharray", lineLength);
        $el.css("stroke-dashoffset", lineLength);

    var $word = $("path#word");
    var $dot = $("path#dot");

    // prepare SVG

    // init controller
    var controller = new ScrollMagic.Controller();

var thirdBlockEntrance = new TimelineMax()
        .add($word, 0.9, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw word for 0.9
        .add($dot, 0.1, {strokeDashoffset: 0, ease:Linear.easeNone}))  // draw dot for 0.1
        .add("path", 1, {stroke: "#33629c", ease:Linear.easeNone}), 0);         // change color during the whole thing

var tweenScene3 = new ScrollMagic.Scene({
        triggerElement: '.container.resume-block-3',

I will again say that this is cropped out of the bigger project, so if something is missing please ask me first in a comment, and I will update the post.

Thank you for your help.


you need to include a duration in your scene options. This will determine the length of the scrolling process that controls the timeline's progress:

     triggerElement: '.container.resume-block-3',
            duration: 800

Need Your Help

UIScrollView contentOffset change after another view pushed

ios cocoa-touch uiview uiscrollview interface-builder

I have a UIViewController in Interface Builder, and I add a UIScrollView to the UIView. It has a contentOffset property equal to 0.0, but when I scroll the UIScrollView to the very bottom and push

opencv cv2.imshow automatically add padding to small image

python opencv imshow

I try to use cv2.imshow() to display images, however I find that the result is padded with blank automatically. The code I use is as following: