Fill svg line and show elements

[Dark19 0 Likes (Newbie)]

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);

[PointC 8,599 Likes (Superhero)]

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.

[Dark19 0 Likes (Newbie)]

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

[PointC 8,599 Likes (Superhero)]

I'm not seeing anything too difficult on that website. You would just have to set up a timeline with the line drawing and the other elements animating. Then control the progress of that timeline with the scroll rather than a specific timed duration.

 

If you could put the basics of the GSAP part of your question into a CodePen, we can take a look for you. For ScrollMagic questions, you can also post here:

 

https://github.com/janpaepke/ScrollMagic/issues

 

You can also take a look at some ScrollMagic tutorials here:

 

https://ihatetomatoes.net/5-days-with-scrollmagic/

 

Happy tweening.

[Dark19 0 Likes (Newbie)]

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?

[PointC 8,599 Likes (Superhero)]

o.k. - I see what you're asking now.

 

You are using getTotalLength() to animate the strokeDashOffset of the line so you need to use that number to trigger the appearance of the hidden element. For example, if your path length is 1,000 and you want to trigger something at 50% of that line, you need to add some logic for the tween to happen when the strokeDashOffset reaches 500.

 

Just an FYI, GSAP's DrawSVG plugin would help a lot for this type of animation. You can then easily trigger things at certain percentages. Please check out the plugin when you get a chance.

 

https://greensock.com/drawSVG

 

It's one of the many cool plugins and perks of Club GreenSock. More info:

 

https://greensock.com/club/

 

Your current setup has the page scrolling up before the line fills so I'd also recommend reviewing the ScrollMagic pinning demos.

 

http://scrollmagic.io/examples/basic/simple_pinning.html

 

Happy tweening.

 

[Dark19 0 Likes (Newbie)]

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?

Edited April 20, 2017 by Dark19

[PointC 8,599 Likes (Superhero)]

I'm not sure what you mean by fast filling. The demo you posted fills the line based on the speed of the user scroll.

 

As for why it's filling before the scene ending, that's what I meant by reviewing the pinning demos on the ScrollMagic site. You need to pin the section while the animation plays.

 

I've made a really basic demo for you. It has three sections. Sections 1 & 3 are empty, but Section 2 has a simple SVG with a line and circle. That section pins for a 50% duration while the line animates. When the line reaches 50%, the circle animates on. This is achieved by using the position parameter on the tween with the circle and setting it to the halfway point of the line tween. In this case, that is 0.5. Once the line hits 100%, the scrolling of the page resumes.

 

See the Pen mmPBRm by PointC (@PointC) on CodePen

 

Please keep in mind that my demo uses the DrawSVG plugin I mentioned in Post #6 so you will need to make a few adjustments to your own animations if you don't want to use that plugin.

 

Hopefully that helps.

 

Happy tweening.