Jump to content
Search Community

Fill svg line and show elements

Dark19 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

4a43f516a0804484ae4f723de89755b1.png

 

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);
Link to comment
Share on other sites

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.

:)

Link to comment
Share on other sites

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 9abf83d7c57b444e991b4d48519fa073.png

 

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

Link to comment
Share on other sites

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.

:)

  • Like 1
Link to comment
Share on other sites

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?

c00c1923476b45f1a02012155b565bf9.png

Link to comment
Share on other sites

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.

:) 

  • Like 2
Link to comment
Share on other sites

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 by Dark19
Link to comment
Share on other sites

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.

:)

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...