CODEWITHSUNDEEP
javascriptcssanimationsvg
Sam
Sam

Reputation: 1666

SVG Animate in reverse once complete

I've created a basic svg animation which loops every 750ms, however once it's finished a single animation loop it jumps back to the beginning giving it an ugly hard cut look. 

<animate attributeName="stop-opacity" from="0.99" to="0.20" dur="750ms" repeatCount="indefinite" />

Is it possible that once the opacity goes from 0.99 down to 0.20 it will work its way back up to 0.99 instead of instantly jumping back to the start variable?

Example fiddle

Upvotes: 10

Views: 14028

Answers (2)

aredzko
aredzko

Reputation: 1730

You can specify multiple values by using the values attribute on animate. Using this, you could specify to go back to the original opacity or even add more opacity values:

<animate attributeName="stop-opacity" values="0.99;0.20;0.99" dur="750ms" repeatCount="indefinite" />

Upvotes: 25

Pat
Pat

Reputation: 2750

Here is a working example. There is no out of the box way to have an animation go back and forth using SMIL, but you can use a workaround that starts a secondary animation after the first that is a backwards animation. This will loop and give the effect of your SVG fading in and out.

<animate id="anim1"attributeName="stop-opacity" from="0.99" to="0.20" dur="750ms" begin="0s; anim2.end" fill="freeze"/>
<animate id="anim2"attributeName="stop-opacity" from="0.20" to="0.99" dur="750ms" begin="anim1.end" fill="freeze"/>

Those are the two lines that I changed. Notice I have the second animation start once the first ends and the first one start after the second one ends (looping between the two).

Upvotes: 13

Related Questions