Animation in SVG image - Auto Drawing

Asked

Viewed 451 times

1

I created a vector in Illustrator and saved it in .svg - this is the present and future of images.

And I got the code on svg of the picture and put on the website. I want to make an animation with this image, an animation like in this example:

http://prinzhorn.github.io/skrollr/examples/path.html

Where the image already exists, but it is drawn while I make a scroll on the page. I already have the skrollr.js in my code, I use in other objects. But in this case svg I’m not getting through.

Nor need be this plugin, I’m only interested in the effect of drawing being done gradually instead of appearing the image altogether.

If you didn’t understand it very well, I’ll explain it in a better way.

I’m almost able to do the auto drawing, but at a certain point in the animation, the drawing goes back. The animation makes the contour, but when it’s over the contour returns. I haven’t caught the deal yet. SVG is something new to me. 

svg{
    display: block;
    vertical-align: bottom;
    height: auto;
    width: 100%;
    .path {
        fill-opacity: 0;
        stroke: #133754;
        fill: #133754;
        stroke-width: 1;
        stroke-dasharray: 0 1014;
        stroke-dashoffset: 1014;
        animation: draw 10s forwards linear;
    }
}

@keyframes draw {
    98%{
        stroke-dashoffset: 0; 
        stroke-dasharray: 1014 0;
        fill-opacity: 0;
    }
    100%{
        fill-opacity: 1;
    }
}

I did it in a different way now. I updated the above code according to some I saw on the internet, however, I don’t understand its syntax.

stroke-dashoffset: 0;
stroke-dasharray: 1014 0;

I don’t know what values mean.

css svg animation

1 answer

1

So, Zoom, Stroke-dasharray is used to create strokes in svg. O Stroke-dashoffset controls the size of this stroke, making it possible to animate the line. Note that in the example you showed, the Stroke-dashoffset starts with the value of 6000, identical to the value applied to the Stroke-dasharray. As you scroll the page the script reduces the value of the Stroke-dashoffset to zero, displaying the line. This is how you should carry out the animation.

Browser other questions tagged css svg animation

You are not signed in. Login or sign up in order to post.