Jump to content
Search Community

I'm failing to draw an svg path by tweening the strokeDashoffset

edmundsecho test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

I'm a new user.  Great work to you all!

 

I have the animation working in css by setting the animation property.  I also have other html/css elements animating with the ScrollTrigger plugin.  So, I get the basics.  Here is the code that does not seem to work:

 

The css

```css

.link {
  stroke: #ffffff;
  stroke-opacity: 0.8;
  stroke-dasharray: 1000; /* make longer than line */
  stroke-dashoffset: 1000;
  stroke-width: 1;
  /* animation: link-animation 1s linear forwards; */
  fill: none;
}

/* not utilized (later will include as backup animation per the GreenSock docs?) */
@keyframes link-animation {
  to {
    stroke-dashoffset: 0;
  }
}

```

 

The js

```js

gsap
  .timeline()
  .to(".link", {
  scrollTrigger: {
    trigger: "#action-inventory",
    start: "center center",
    toggleActions: "restart none none restart",
    markers: true,
    onEnter: () => console.log("enter"),
    onLeave: () => console.log("leave"),
    id: "act-inventory",
  },
  strokeDashoffset: 0,
  duration: 3,
});

```

and the html

```html

           <svg class="inventory-svg" height="100%" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"
                    xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1"
                    viewBox="100 0 900 940">
                        <defs>
                            <filter id="blurr" x="-20" y="-20" width="100" height="100">
                                <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter>
                            <g id="list-item" class="list-item">
                                <path stroke-width="8" d="m6.79 6.146 19.543 9.771L6.79 25.689V6.146Z" />
                                <path stroke-width="19" d="M55.703 15.917H163.19" /> </g>
                            <symbol id="file-icon" class="file-icon">
                                <title>File icon</title>
                                <svg width="98.3" height="114.4" viewBox="0 0 98.3 114.4">
                                    <path d="M1 1h81l13 13 1 98H1V1Z" fill="var(--fill-color)" fill-opacity="var(--fill-opacity)"
                                    stroke="var(--stroke)" stroke-width="var(--stroke-width)"
                                    stroke-opacity="var(--stroke-opacity)" opacity="var(--opacity)"
                                    /> </svg>
                            </symbol>
                        </defs>
                        <!-- drawing -->
                        <g id="links">
                            <g id="link-1">
                                <path class="link" id="path-link-1" d="M465.63+545.095L574.015+543.531L793.719+762.672L815+762.538"
                                /> </g>
                            <g id="link-2">
                                <path class="link" id="path-link-2" d="M220.154+362.592L470.094+363.045L790.898+701L815+700.79"
                                /> </g>
                           
                                <circle class="pulsate" cx="-5" cy="0" r="5">
                                    <animateMotion begin="3s" dur="6s" repeatCount="indefinite" rotate="auto">
                                        <mpath href="#path-link-2" /> </animateMotion>
                                    <animateTransform attributeName="transform" begin="2s" calcMode="linear" type="scale"
                                    values="0;0.2;1;0.2;0" dur="3.5s" repeatCount="indefinite"
                                    /> </circle>
                            </g>
                        </g>

</svg>

```

The scroll triggers are activated per the log to the console.  The class name and css attribute spelling and capitalization seems right. 

 

### Is there something I'm missing that has gsap find the elements with the ".link" class to then change their `strokeDashoffset: 0`?

 

Thank you!

 

(Note: I can return shortly to put the code into codepen)

Link to comment
Share on other sites

  • Solution

Since you're adding the ScrollTrigger to a timeline, you need to write it like this.

 

gsap
  .timeline({
    scrollTrigger: {
      trigger: "#action-inventory",
      start: "center center",
      toggleActions: "restart none none restart",
      markers: true,
      onEnter: () => console.log("enter"),
      onLeave: () => console.log("leave"),
      id: "act-inventory"
    }
  })
  .to("#path-link-1", {
    strokeDashoffset: 0,
    duration: 3
  });

Also take a look at drawSVG. It'll make your life easier.

Happy tweening.

:)

 

  • Like 4
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...