Drawing SVG Paths #114

Closed
sleepydada opened this Issue Nov 6, 2013 · 11 comments

Comments

Projects
None yet
3 participants

Hi,

I'm drawing to draw SVG Paths one after another as the viewer scroll to "#hospital-drawing". But the lines are already drawn when I get to the DIV and then after the designated delay they start to draw again.

This is my HTML;

<div id="hospital_drawing">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  height="500" width="960">
  <path id="lineAB" d="M 706 10 l 89 57"  stroke-width="3" fill="none" />
  <path id="lineBC" d=" M 795 67 l 0 126"  stroke-width="3" fill="none" />
</svg>
</div>

and my JS

jQuery(document).ready(function(e) {
var controller = $.superscrollorama({});

var orig1 = document.querySelector('#lineAB');

var obj1 = {length:0,
           pathLength:orig1.getTotalLength()};

orig1.style.stroke = '#f60';

var t1 = controller.addTween(
    "#hospital_drawing",
    (new TimelineLite())
    .add([
TweenMax.to(obj1, .5, {length:obj1.pathLength, onUpdate:drawLine1, delay:4,ease:Linear.easeNone})
]));
function drawLine1() {
  orig1.style.strokeDasharray = [obj1.length,obj1.pathLength].join(' ');

}

var orig2 = document.querySelector('#lineBC');

var obj2 = {length:0,
           pathLength:orig2.getTotalLength()};

orig2.style.stroke = '#f60';

var t2 = controller.addTween("#hospital_drawing",
    (new TimelineLite())
    .add([TweenMax.to(obj2, .5, {length:obj2.pathLength, onUpdate:drawLine2,delay:6,ease:Linear.easeNone})
]));
function drawLine2() {
  orig2.style.strokeDasharray = [obj2.length,obj2.pathLength].join(' ');

}
});

Sorry I didn't use codepen. I'm not a pro member, so it doesn't let me have two external sources (superscrollorama and tweenmax).

I'd really appreciate your help.

You can see the site here;

www.goindoor.com

Collaborator

janpaepke commented Nov 7, 2013

Hello and welcome.

Firstly: Your demo page does not show any of the svg you described.
Please always make a dedicated demo page in case you are still working on the live website.

Secondly: Your code is quite complicated (and not commented). Please try to simplify your problem and I will be able to help you a lot better. Also trying to simplify it will help you better understand the code and you might even solve the problem yourself.

So I suggest you set up a demo page only featuring one svg and one line drawing and there you try to have it react to the scroll position. And then take it from there.
If you run into problems with that demo let me know and I will take a look.

regards,
J

janpaepke was assigned Nov 7, 2013

Are you referring to www.goingdoor.com by the demo page?

Collaborator

janpaepke commented Nov 7, 2013

No, I'm referring to http://www.goindoor.com as the demopage, since that was the one you sent.
http://www.goingdoor.com doesn't really work (typo?).

Yes that's what I meant. I just changed it to http://www.goindoor.com/industries/

Collaborator

janpaepke commented Nov 7, 2013

I see.
This is precisely what I meant, when I asked you to set up a dedicated demo page for the purpose of debugging this issue. It is normal that a production page keeps changing, which makes it quite difficult for me or anybody else to help you.

Even with the new page, where I can see some animation now, there is a lot of other stuff going on and zeroing in on the issue is quite impossible this way.
Please Create a page where nothing else is going on aside from what you are trying to achieve.

If you need a good example for a demo page, check out what James has done in this issue: #113

regards,
J

Here's the demo page I set up;

http://www.goindoor.com/demo/

You have to scroll down and wait for a few seconds to see it.

Collaborator

janpaepke commented Nov 12, 2013

All right, cool.
I'll have a look as soon as I can.
Sadly I'm quite busy at the moment but I should get around to it some time this week...
Regards,
J

jkrot commented Nov 12, 2013

@sleepydada the problem isn't in superscrollorama it is your animation and tweens. I really had a hard time reading your code I have re factored it.

@janpaepke as you can clearly see if you comment out adding the tweens and the animation the image is already there. I am not a svg pro but I would either have the animation change the style of the color of the lines from like white to orange to get the desired effect or some other styling method. This is clearly a animation issue to me and not a scrolling issue.

@sleepydada as @janpaepke has told me on some of my own projects get your animation to work correctly first then add it to your scrolling logic. It is sound advice.

<!doctype html>
<html lang="en-US">
<head>


<title> Demo |  Goindoor</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js?ver=3.7.1'></script>
<script type='text/javascript' src='http://www.chartjs.org/docs/Chart.js?ver=3.7.1'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js?ver=3.7.1'></script>
<script type='text/javascript' src='http://www.goindoor.com/wp-content/themes/salient/js/jquery.superscrollorama.js?ver=3.7.1'></script>
<script type='text/javascript' src='http://www.goindoor.com/wp-content/themes/salient/js/goindoor.js?ver=3.7.1'></script>

</head>


<body>
<div id="padding" style="padding-top: 300px;"></div>
<div id="hospital_drawing">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"  height="500" width="960">
      <path id="lineAB" d="M 706 10 l 89 57"  stroke-width="3" fill="none" />
      <path id="lineBC" d=" M 795 67 l 0 126"  stroke-width="3" fill="none" />
      <path id="lineCD" d="M 795 192 l 114 73"  stroke-width="3" fill="none" />
      <path id="lineDE" d="M 909 265 l -625 0"  stroke-width="3" fill="none" />
      <path id="lineEF" d=" M 284 265 l 0 70" stroke-width="3" fill="none" />
      <path id="lineFG" d="M 284 335 l 92 53"  stroke-width="3" fill="none" />
    </svg>
</div>


<script>

jQuery(document).ready(function(e) {

    var controller = jQuery.superscrollorama({});
    var timeLine1 = new TimelineLite({})

    var orig1 = document.querySelector('#lineAB');
    var obj1 = {length:0,pathLength:orig1.getTotalLength()};
    orig1.style.stroke = '#f60';

    var orig2 = document.querySelector('#lineBC');
    var obj2 = {length:0,pathLength:orig2.getTotalLength()};
    orig2.style.stroke = '#f60';

    var orig3 = document.querySelector('#lineCD');
    var obj3 = {length:0,pathLength:orig3.getTotalLength()};
    orig3.style.stroke = '#f60';

    var orig4 = document.querySelector('#lineDE');
    var obj4 = {length:0,pathLength:orig4.getTotalLength()};
    orig4.style.stroke = '#f60';

    var orig5 = document.querySelector('#lineEF');
    var obj5 = {length:0,pathLength:orig5.getTotalLength()};
    orig5.style.stroke = '#f60';

    var orig6 = document.querySelector('#lineFG');
    var obj6 = {length:0,pathLength:orig6.getTotalLength()};
    orig6.style.stroke = '#f60';

    function drawLine1() {orig1.style.strokeDasharray = [obj1.length,obj1.pathLength].join(' ');}
    function drawLine2() {orig2.style.strokeDasharray = [obj2.length,obj2.pathLength].join(' ');}
    function drawLine3() {orig3.style.strokeDasharray = [obj3.length,obj3.pathLength].join(' ');}
    function drawLine4() {orig4.style.strokeDasharray = [obj4.length,obj4.pathLength].join(' ');}
    function drawLine5() {orig5.style.strokeDasharray = [obj5.length,obj5.pathLength].join(' ');}
    function drawLine6() {orig6.style.strokeDasharray = [obj6.length,obj6.pathLength].join(' ');}

     // You can comment out this code for the tweens and timeline to prevent the animation

//  var tween1 = TweenMax.to(obj1, .5, {length:obj1.pathLength, onUpdate:drawLine1, delay:4,ease:Linear.easeNone,immediateRender: false});
//  var tween2 = TweenMax.to(obj2, .5, {length:obj2.pathLength, onUpdate:drawLine2, delay:6,ease:Linear.easeNone,immediateRender: false});
//  var tween3 = TweenMax.to(obj3, .5, {length:obj3.pathLength, onUpdate:drawLine3, delay:8,ease:Linear.easeNonem,immediateRender: false});
//  var tween4 = TweenMax.to(obj4, .5, {length:obj4.pathLength, onUpdate:drawLine4, delay:10,ease:Linear.easeNone,immediateRender: false});
//  var tween5 = TweenMax.to(obj5, .5, {length:obj5.pathLength, onUpdate:drawLine5, delay:12,ease:Linear.easeNone,immediateRender: false});
//  var tween6 = TweenMax.to(obj6, .5, {length:obj6.pathLength, onUpdate:drawLine6, delay:14,ease:Linear.easeNone,immediateRender: false});

//  tl.timeLine1([tween1, tween2, tween3, tween4, tween5, tween6], "+=2", "sequence", 0.5);

});
</script>

</body>
</html>
Collaborator

janpaepke commented Nov 13, 2013

Thanks, @jkrot for helping out. I agree with your analysis.
Does this help you, @sleepydada? Do you understand what jkrot means by first getting the animation right and then adding scroll logic?
Regards,
J

janpaepke closed this Feb 3, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment