Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Safari - Path showing first point before animation starts #77

Open
pirusta opened this issue Jan 21, 2020 · 0 comments
Open

Safari - Path showing first point before animation starts #77

pirusta opened this issue Jan 21, 2020 · 0 comments

Comments

@pirusta
Copy link

pirusta commented Jan 21, 2020

I have been using a previous version of LLP and I'm upgrading to the latest one.
The only issue I faced so far is that in Safari, the first dot of a line is shown before the corresponding animation starts. I'm using a large strokeWidth so it makes it very noticeable.

This is the animation when it is starting:
Screen Shot 2020-01-21 at 10 17 25
the dot at the right should not be visible yet

This is the animation halfway:
Screen Shot 2020-01-21 at 10 25 37

And this is the completed animation:
Screen Shot 2020-01-21 at 10 17 29

This is the relevant code:

` <script type="text/javascript">

      (function(){ 

        document.onreadystatechange = () => {

          if (document.readyState === 'complete') {
                    
            /**
             * Setup your Lazy Line element.
             * see README file for more settings
             */

            let el = document.querySelector('#t');
            let myAnimation = new LazyLinePainter(el, {"ease":"easeLinear","strokeWidth":20,"strokeOpacity":1,"strokeColor":"#F39C19","strokeCap":"round"}); 
            myAnimation.paint(); 
          }
        }

      })();

    </script>
  </head>

  <body>
    <svg version="1.1" id="t" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="106.491px" height="256.876px" viewBox="7.1 0 106.491 256.876" xml:space="preserve" data-llp-composed="true" class="lazy-line-painter">
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant