Trail Effect with SVG and VectorS

index.html

<svg id="mySVG"  viewBox="0 0 800 500">
  <title>Awesome Trail Effect from Snorkl.tv</title>
  <desc>See Title</desc>

 <defs>
   <style type="text/css">@import url('https://fonts.googleapis.com/css?family=Kanit:400,800');</style>
   <radialGradient id="Gradient_1" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="457.79001736604096" fx="87.54705882352944" fy="45.66078431372547" gradientTransform="matrix( 0.8866510509237457, 0.46243909209302037, -0.4186417194125052, 0.8026605781274461, 157,187.05) " spreadMethod="pad">
<stop  offset="0%" stop-color="#39AEE0"/>

<stop  offset="100%" stop-color="#3D89BF"/>
</radialGradient>
   <text id="textSample"></text>
   
 </defs>
  <g id="Layer1_0_FILL">
<path fill="url(#Gradient_1)" stroke="none" d="
M 0 0
L 0 500 800 500 800 0 0 0 Z"/>
</g>
 
  
</svg>

script.js

var text = ["PRETTY COOL", "TRAIL EFFECT", "DONTCHA THINK?", "I THINKS SO:)"];

var mySVG = document.getElementById("mySVG");
var box = mySVG.viewBox.baseVal;
var xmlns = "http://www.w3.org/2000/svg";
var master = new TimelineMax({repeat:1, repeatDelay:0.5});


var config = {
	startX: box.width/2,
	startY: -50, //grrrr 
	endX: box.width/2,
	endY: box.height/2,
	iterations: 6,
	duration:0.5,
	timeScale:1,
	element : "textSample",
} 


function createTrails(config, theText) {
  var tl = new TimelineMax();
  var wordDef = document.getElementById(config.element);
  var fullWord = wordDef.cloneNode(true);
  fullWord.textContent = theText;
  var holder = document.createElementNS (xmlns, "g");
  mySVG.appendChild (holder);
  fullWord.setAttribute("id", "");
  holder.appendChild(fullWord);
  TweenMax.set(fullWord, {
    x:config.startX - fullWord.getBBox().width/2,
    y:config.startY
  })
  tl.to(fullWord, config.duration, {y:config.endY, ease:Linear.easeNone});
  var subTimeline = new TimelineLite();
  for (var i = 0; i < config.iterations; i++){
    var clone = fullWord.cloneNode(true);
    clone.setAttribute("id", "");
    holder.appendChild(clone);
		tl.progress(i/config.iterations);
		TweenLite.set(clone, {opacity:0, x:fullWord._gsTransform.x, y:fullWord._gsTransform.y})
		subTimeline.fromTo(clone, 0.5, {opacity:(i/(config.iterations)) * 0.6}, {opacity:0, ease:Linear.easeNone, immediateRender:false}, tl.time());
	}	
  tl.add(subTimeline, 0);	
	tl.from(holder, tl.duration(), {y:"+=50", ease:Back.easeOut.config(5)}, 0);
	tl.to(holder, 0.1, {y:"-=20", alpha:0}, "+=1");
	tl.restart().timeScale(config.timeScale);
  return tl;
}

function buildDemo() {
  for (var i = 0; i < text.length; i++){
    master.add(createTrails(config, text[i]));
  }
}

buildDemo();

GSDevTools.create({animation:master, minimal:true});

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools.min.js?r=88"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

style.css

body {
  background-color:#131313;
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 max-width: 100%;
 height: 100%
}

text {
  font-family:Kanit;
  fill:white;
  font-size:55px;
  font-weight:800;
  dominant-baseline:hanging;
  letter-spacing:4px;
}

trail-effect-with-svg-and-vectors.markdown

Trail Effect with SVG and VectorS

A Pen by Motionharvest on CodePen.

License.