Search code examples
svgsvg-animate

svg fade-in text, fade-out text, and continue doing the same with new text, for set time-periods

I want to modify code-related as follows:

  1. I want Word 1 to fade-in for 0.2 seconds, then stay on screen for 4.6 seconds, then fade-out for 0.2 seconds (i.e. a total of 5 seconds)
  2. Word 1 stays off until Word 2 (below) fades-out.
  3. Next, I want to introduce Word 2in the same way: fade-in for 0.2 seconds, then stay on screen for 4.6 seconds, then fade-out for 0.2 seconds (i.e. a total of 5 seconds)
  4. Word 2 stays off until Word 1 fades-out. Word 1 reappears as described in points 1 and 2.
  5. And infinite repeat/cycle 1, 2, 3, 4 in the same sequence.

Note: Only one word is on the screen at one time, and they appear and disappear cyclically, sequentially.

Please advise.

  
  
<svg width="100%" height="100%" viewBox="-180 5 700 300" xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; version="1.1"> 
  <path id="path" d="m0,110 h1100"/> 
    
  <text font-size="30" font-family="arial" fill="#ff5722"> 
    
    <textPath xlink:href="#path"><tspan fill-opacity="0"><animate id="animation1" attributeName="fill-opacity" dur="2s" to="1" fill="remove" repeatCount="indefinite"/>Word 1 </tspan>
          
    </textPath> 
  </text> 
</svg>

Solution

  • You want something with keyTimes and keySplines. Like this perhaps...

    <svg width="100%" height="100%" viewBox="-180 5 700 300" xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; version="1.1"> 
  <path id="path" d="m0,110 h1100"/> 
    
  <text font-size="30" font-family="arial" fill="#ff5722"> 
    
    <textPath xlink:href="#path"><tspan fill-opacity="0"><animate id="animation1" begin="0s;animation2.end" attributeName="fill-opacity" dur="5s" values="0;1;1;0" keyTimes="0;0.04;0.96;1"/>Word 1 </tspan>
    </textPath> 
  </text> 
  <text font-size="30" font-family="arial" fill="#ff5722"> 
    
    <textPath xlink:href="#path"><tspan fill-opacity="0"><animate id="animation2" begin="animation1.end" attributeName="fill-opacity" dur="5s" values="0;1;1;0" keyTimes="0;0.04;0.96;1"/>Word 2 </tspan>
    </textPath> 
  </text> 
</svg>