[Fill svg line and show elements]

Thank you) Maybe you tell me why line so very fast filling? And Why line filling early than scene end?

var s5Tween = new TimelineMax();
    s5Tween.to($(companyLine), 1, {strokeDashoffset: 0, ease:Linear.easeNone}) // draw word for 0.9
        .add(TweenMax.to(companyLine, 0, {stroke: "#3495d1", ease:Linear.easeNone}), 0);

How can I make it slowly?

[Fill svg line and show elements]

If you could put the basics of the GSAP part of your question into a CodePen, we can take a look for you.

I create real example 

See the Pen WjwoWm by dark19 (@dark19) on CodePen

. I don`t know how show the hidden element when blue fill go to limit. How Can I determine that fill before current element?

[Fill svg line and show elements]

Hi Dark19 

 

Welcome to the forum.

 

I'm not 100% sure what you're asking, but my guess is you want the lines to animate across the screen? Are you asking how to animate an element that you've hidden in the CSS? If that's the question, you can use GSAPs autoAlpha:1 to make them visible right before you want to animate them. You can also use a set() to make the stroke a new color rather than using that 0 duration tween I see in your timeline. Like this:

s4Tween.set(processLine, {stroke: "#3495d1"});

I'm just guessing about ways to help you at this point. If you could put the basics of the problem into a simple demo, I'm sure we can point you in the right direction. Here's some info about that.

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Happy tweening.

 

Okay, thanks. I will try to show how it should look 

 

I want do it us like there https://serioverify.com/ on Features and Our Process sections, that line fill to some element and it have animation. But a don`t know how to do it with GSAP + ScrollMagic

[Fill svg line and show elements]

Hello! I have some issue with show elements. I fill svg line with help property stroke:

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

 

But I don`t know how can show element when fill before it (elements are hidden). They are conected only alike scene and they have absolut position. Maybe GSAP or Scrollmagic have some functions for decide this problem? Or maybe give me some hints.

 

My code:

// Init ScrollMagic
    var ctrl = new ScrollMagic.Controller({
        globalSceneOptions: {
            triggerHook: 0,
            tweenChanges: true,
            duration: ScreenHeight
        }
    });

    // Create scene
    $("section").each(function(){

        new ScrollMagic.Scene({
            triggerElement: this
        })
            .setPin(this)
            .addTo(ctrl);

    });

    var processLine = '#process-line';

    // prepare SVG
    pathPrepare($(processLine));

    var s4Tween = new TimelineMax();
    s4Tween.to($(processLine), 1, {strokeDashoffset: 0, ease:Linear.easeNone})
        .add(TweenMax.to(processLine, 0, {stroke: "#3495d1", ease:Linear.easeNone}), 0);

    // Create scene
    var scene4 = new ScrollMagic.Scene({
        triggerElement: "#section3"
    })
        .setTween(s4Tween)
        .addIndicators({name: "1 (duration: svg)"})
        .addTo(ctrl);