Animation Code

SasDiscount20 – Animation Code

The following code shows you the main files the animation you just clicked on.

Made with Flow 1.6.5

Layers

These are the DOM layers. Animations need to be wrapped in a flow-artboard and all layers need to be flow-layer classes. The animation-link is used only to get you here ;).

<div class="animationLink"><a href="https://createwithflow.com/pagesanimations/code/sasDiscount20.html">

    <div class="flow-artboard" id="SasDiscount20">
    <div class="flow-layer bartop">
      <svg class="bartop-svg" preserveAspectRatio="none" viewBox="0 0 340 1">
        <title>barTop</title>
        <desc>Made with Flow.</desc>
      <path vector-effect="non-scaling-stroke" d="M0,0.5c0,-0.276,0.18,-0.5,0.403,-0.5 0,0,339.195,0,339.195,0 0.222,0,0.403,0.224,0.403,0.5 0,0,0,0,0,0 0,0.276,-0.18,0.5,-0.403,0.5 0,0,-339.195,0,-339.195,0 -0.222,0,-0.403,-0.224,-0.403,-0.5 0,0,0,0,0,0zM0,0.5">
        </path>
      </svg>
      <div class="flow-border bartop-border"></div>
    </div>
    <div class="flow-layer barbottom">
      <svg class="barbottom-svg" preserveAspectRatio="none" viewBox="0 0 340 1">
        <title>barBottom</title>
        <desc>Made with Flow.</desc>
      <path vector-effect="non-scaling-stroke" d="M0,0.5c0,-0.276,0.18,-0.5,0.403,-0.5 0,0,339.195,0,339.195,0 0.222,0,0.403,0.224,0.403,0.5 0,0,0,0,0,0 0,0.276,-0.18,0.5,-0.403,0.5 0,0,-339.195,0,-339.195,0 -0.222,0,-0.403,-0.224,-0.403,-0.5 0,0,0,0,0,0zM0,0.5">
        </path>
      </svg>
      <div class="flow-border barbottom-border"></div>
    </div>
    <div class="flow-layer mainlabel">
      <svg class="mainlabel-svg" preserveAspectRatio="none" viewBox="0 0 230.79 23">
        <title>mainLabel</title>
        <desc>Made with Flow.</desc>
      <path vector-effect="non-scaling-stroke" d="M0.064,22.715c0,0,0,0,0,0 0,0,15.856,0,15.856,0 0,0,0,0,0,0 0,0,0,-4.402,0,-4.402 0,0,0,0,0,0 0,0,-9.284,0,-9.284,0 0,0,0,0,0,0 0,0,0,-0.128,0,-0.128 0,0,0,0,0,0 0,0,5.137,-4.784,5.137,-4.784 2.68,-2.52,3.797,-4.465,3.797,-6.794 0,-3.891,-3.158,-6.602,-7.721,-6.602 -4.69,0,-7.848,2.743,-7.848,7.591 0,0,4.786,0,4.786,0 0,-2.328,1.404,-3.253,3.063,-3.253 1.691,0,2.712,0.989,2.712,2.424 0,1.536,-0.858,2.717,-2.944,4.71 0,0,-7.552,7.219,-7.552,7.219 0,0,0,0,0,0 0,0,0,4.019,0,4.019zM26.66,23c6.092,0,8.74,-4.849,8.74,-11.516 0,-6.635,-2.648,-11.484,-8.74,-11.484 -6.092,0,-8.74,4.849,-8.74,11.484 0,6.667,2.648,11.516,8.74,11.516zM26.66,18.66c-2.774,0,-3.73,-2.296,-3.73,-7.176 0,0,0.006,-0.631,0.006,-0.631 0.085,-4.416,1.104,-6.513,3.724,-6.513 2.681,0,3.685,2.195,3.729,6.825 0,0,0.001,0.319,0.001,0.319 0,4.88,-0.956,7.176,-3.73,7.176zM42.89,11.615c3.316,0,5.325,-2.36,5.325,-5.805 0,-3.445,-2.041,-5.805,-5.325,-5.805 -3.316,0,-5.325,2.36,-5.325,5.805 0,3.445,2.009,5.805,5.325,5.805zM40.015,22.715c0,0,0,0,0,0 0,0,4.115,0,4.115,0 0,0,0,0,0,0 0,0,15.055,-22.011,15.055,-22.011 0,0,0,0,0,0 0,0,0,-0.319,0,-0.319 0,0,0,0,0,0 0,0,-4.051,0,-4.051,0 0,0,0,0,0,0 0,0,-15.119,22.011,-15.119,22.011 0,0,0,0,0,0 0,0,0,0.319,0,0.319zM42.89,8.49c-1.18,0,-2.01,-0.67,-2.01,-2.68 0,-2.01,0.83,-2.68,2.01,-2.68 1.18,0,2.01,0.67,2.01,2.68 0,2.01,-0.83,2.68,-2.01,2.68zM56.6,22.995c3.316,0,5.325,-2.36,5.325,-5.805 0,-3.445,-2.041,-5.805,-5.325,-5.805 -3.316,0,-5.325,2.36,-5.325,5.805 0,3.445,2.009,5.805,5.325,5.805zM56.6,19.87c-1.18,0,-2.01,-0.67,-2.01,-2.68 0,-2.01,0.83,-2.68,2.01,-2.68 1.18,0,2.01,0.67,2.01,2.68 0,2.01,-0.83,2.68,-2.01,2.68zM83.16,23c7.177,0,10.845,-5.071,10.845,-11.45 0,-6.411,-3.668,-11.45,-10.845,-11.45 -7.209,0,-10.845,5.039,-10.845,11.45 0,6.379,3.636,11.45,10.845,11.45zM83.16,18.47c-3.699,0,-5.74,-2.424,-5.74,-6.92 0,-4.496,2.009,-6.92,5.74,-6.92 3.699,0,5.74,2.424,5.74,6.92 0,4.496,-2.041,6.92,-5.74,6.92zM96.805,22.715c0,0,0,0,0,0 0,0,5.008,0,5.008,0 0,0,0,0,0,0 0,0,0,-8.645,0,-8.645 0,0,0,0,0,0 0,0,9.953,0,9.953,0 0,0,0,0,0,0 0,0,0,-4.466,0,-4.466 0,0,0,0,0,0 0,0,-9.953,0,-9.953,0 0,0,0,0,0,0 0,0,0,-4.753,0,-4.753 0,0,0,0,0,0 0,0,10.942,0,10.942,0 0,0,0,0,0,0 0,0,0,-4.466,0,-4.466 0,0,0,0,0,0 0,0,-15.95,0,-15.95,0 0,0,0,0,0,0 0,0,0,22.33,0,22.33zM115.875,22.715c0,0,0,0,0,0 0,0,5.008,0,5.008,0 0,0,0,0,0,0 0,0,0,-8.645,0,-8.645 0,0,0,0,0,0 0,0,9.953,0,9.953,0 0,0,0,0,0,0 0,0,0,-4.466,0,-4.466 0,0,0,0,0,0 0,0,-9.953,0,-9.953,0 0,0,0,0,0,0 0,0,0,-4.753,0,-4.753 0,0,0,0,0,0 0,0,10.942,0,10.942,0 0,0,0,0,0,0 0,0,0,-4.466,0,-4.466 0,0,0,0,0,0 0,0,-15.95,0,-15.95,0 0,0,0,0,0,0 0,0,0,22.33,0,22.33zM143.475,22.715c0,0,0,0,0,0 0,0,5.008,0,5.008,0 0,0,0,0,0,0 0,0,0,-8.645,0,-8.645 0,0,0,0,0,0 0,0,9.953,0,9.953,0 0,0,0,0,0,0 0,0,0,-4.466,0,-4.466 0,0,0,0,0,0 0,0,-9.953,0,-9.953,0 0,0,0,0,0,0 0,0,0,-4.753,0,-4.753 0,0,0,0,0,0 0,0,10.942,0,10.942,0 0,0,0,0,0,0 0,0,0,-4.466,0,-4.466 0,0,0,0,0,0 0,0,-15.95,0,-15.95,0 0,0,0,0,0,0 0,0,0,22.33,0,22.33zM162.545,22.715c0,0,0,0,0,0 0,0,15.15,0,15.15,0 0,0,0,0,0,0 0,0,0,-4.466,0,-4.466 0,0,0,0,0,0 0,0,-10.143,0,-10.143,0 0,0,0,0,0,0 0,0,0,-17.864,0,-17.864 0,0,0,0,0,0 0,0,-5.007,0,-5.007,0 0,0,0,0,0,0 0,0,0,22.33,0,22.33zM189.43,23c7.177,0,10.845,-5.071,10.845,-11.45 0,-6.411,-3.668,-11.45,-10.845,-11.45 -7.209,0,-10.845,5.039,-10.845,11.45 0,6.379,3.636,11.45,10.845,11.45zM189.43,18.47c-3.699,0,-5.74,-2.424,-5.74,-6.92 0,-4.496,2.009,-6.92,5.74,-6.92 3.699,0,5.74,2.424,5.74,6.92 0,4.496,-2.041,6.92,-5.74,6.92zM206.265,22.715c0,0,0,0,0,0 0,0,-5.105,-22.011,-5.105,-22.011 0,0,0,0,0,0 0,0,0,-0.319,0,-0.319 0,0,0,0,0,0 0,0,5.392,0,5.392,0 0,0,0,0,0,0 0,0,2.967,15.408,2.967,15.408 0,0,0,0,0,0 0,0,0.128,0,0.128,0 0,0,0,0,0,0 0,0,3.573,-15.408,3.573,-15.408 0,0,0,0,0,0 0,0,5.552,0,5.552,0 0,0,0,0,0,0 0,0,3.637,15.408,3.637,15.408 0,0,0,0,0,0 0,0,0.128,0,0.128,0 0,0,0,0,0,0 0,0,2.935,-15.408,2.935,-15.408 0,0,0,0,0,0 0,0,5.328,0,5.328,0 0,0,0,0,0,0 0,0,0,0.319,0,0.319 0,0,0,0,0,0 0,0,-5.105,22.011,-5.105,22.011 0,0,0,0,0,0 0,0,-6.477,0,-6.477,0 0,0,0,0,0,0 0,0,-3.127,-14.77,-3.127,-14.77 0,0,0,0,0,0 0,0,-0.128,0,-0.128,0 0,0,0,0,0,0 0,0,-3.222,14.77,-3.222,14.77 0,0,0,0,0,0 0,0,-6.477,0,-6.477,0zM206.265,22.715">
        </path>
      </svg>
      <div class="flow-border mainlabel-border"></div>
    </div>
    <div class="flow-layer usecode">
        <div class="flow-layer usecodelabel">
          <svg class="usecodelabel-svg" preserveAspectRatio="none" viewBox="0 0 46.92 7">
            <title>useCodeLabel</title>
            <desc>Made with Flow.</desc>
          <path vector-effect="non-scaling-stroke" d="M2.89,6.995c1.628,0,2.905,-0.926,2.905,-2.787 0,0,0,-4.123,0,-4.123 0,0,0,0,0,0 0,0,-1.54,0,-1.54,0 0,0,0,0,0,0 0,0,0,4.103,0,4.103 0,0.76,-0.273,1.442,-1.365,1.442 -1.072,0,-1.355,-0.682,-1.355,-1.442 0,0,0,-4.103,0,-4.103 0,0,0,0,0,0 0,0,-1.53,0,-1.53,0 0,0,0,0,0,0 0,0,0,4.123,0,4.123 0,1.862,1.287,2.787,2.885,2.787zM9.325,7c2.046,0,2.845,-0.877,2.845,-2.096 0,-1.278,-0.883,-1.806,-2.068,-2.08 0,0,-1.089,-0.231,-1.089,-0.231 -0.633,-0.136,-0.77,-0.37,-0.77,-0.634 0,-0.283,0.273,-0.595,1.072,-0.595 0.809,0,1.15,0.409,1.189,0.858 0,0,1.549,0,1.549,0 -0.01,-1.306,-1.16,-2.223,-2.719,-2.223 -1.608,0,-2.66,0.809,-2.66,1.96 0,1.247,0.843,1.748,1.946,2.011 0,0,1.153,0.251,1.153,0.251 0.604,0.127,0.828,0.351,0.828,0.721 0,0.409,-0.341,0.702,-1.277,0.702 -0.741,0,-1.257,-0.331,-1.325,-1.072 0,0,-1.549,0,-1.549,0 0.088,1.472,1.052,2.428,2.875,2.428zM12.985,6.91c0,0,0,0,0,0 0,0,4.87,0,4.87,0 0,0,0,0,0,0 0,0,0,-1.354,0,-1.354 0,0,0,0,0,0 0,0,-3.341,0,-3.341,0 0,0,0,0,0,0 0,0,0,-1.481,0,-1.481 0,0,0,0,0,0 0,0,3.039,0,3.039,0 0,0,0,0,0,0 0,0,0,-1.364,0,-1.364 0,0,0,0,0,0 0,0,-3.039,0,-3.039,0 0,0,0,0,0,0 0,0,0,-1.257,0,-1.257 0,0,0,0,0,0 0,0,3.341,0,3.341,0 0,0,0,0,0,0 0,0,0,-1.364,0,-1.364 0,0,0,0,0,0 0,0,-4.87,0,-4.87,0 0,0,0,0,0,0 0,0,0,6.82,0,6.82zM24.331,7c1.736,0,2.887,-1.189,3.024,-2.593 0,0,-1.551,0,-1.551,0 -0.117,0.643,-0.556,1.219,-1.473,1.219 -1.131,0,-1.746,-0.741,-1.746,-2.116 0,-1.375,0.614,-2.125,1.746,-2.125 0.956,0,1.404,0.624,1.463,1.277 0,0,1.561,0,1.561,0 -0.098,-1.443,-1.278,-2.662,-3.024,-2.662 -2.195,0,-3.306,1.54,-3.306,3.51 0,1.94,1.112,3.49,3.306,3.49zM31.14,7c2.194,0,3.315,-1.55,3.315,-3.5 0,-1.96,-1.121,-3.5,-3.315,-3.5 -2.203,0,-3.315,1.54,-3.315,3.5 0,1.95,1.112,3.5,3.315,3.5zM31.14,5.615c-1.131,0,-1.755,-0.741,-1.755,-2.115 0,-1.374,0.614,-2.115,1.755,-2.115 1.131,0,1.755,0.741,1.755,2.115 0,1.374,-0.624,2.115,-1.755,2.115zM35.305,6.91c0,0,0,0,0,0 0,0,2.36,0,2.36,0 2.136,0,3.53,-1.51,3.53,-3.41 0,-2.046,-1.492,-3.41,-3.53,-3.41 0,0,-2.36,0,-2.36,0 0,0,0,0,0,0 0,0,0,6.82,0,6.82zM36.74,5.55c0,0,0,0,0,0 0,0,0,-4.1,0,-4.1 0,0,0,0,0,0 0,0,0.84,0,0.84,0 1.279,0,2.06,0.633,2.06,2.045 0,1.422,-0.781,2.055,-2.06,2.055 0,0,-0.84,0,-0.84,0zM42.055,6.91c0,0,0,0,0,0 0,0,0,-6.82,0,-6.82 0,0,0,0,0,0 0,0,4.87,0,4.87,0 0,0,0,0,0,0 0,0,0,1.364,0,1.364 0,0,0,0,0,0 0,0,-3.341,0,-3.341,0 0,0,0,0,0,0 0,0,0,1.257,0,1.257 0,0,0,0,0,0 0,0,3.039,0,3.039,0 0,0,0,0,0,0 0,0,0,1.364,0,1.364 0,0,0,0,0,0 0,0,-3.039,0,-3.039,0 0,0,0,0,0,0 0,0,0,1.481,0,1.481 0,0,0,0,0,0 0,0,3.341,0,3.341,0 0,0,0,0,0,0 0,0,0,1.354,0,1.354 0,0,0,0,0,0 0,0,-4.87,0,-4.87,0zM42.055,6.91">
            </path>
          </svg>
          <div class="flow-border usecodelabel-border"></div>
        </div><div class="flow-layer couponlabel">
          <svg class="couponlabel-svg" preserveAspectRatio="none" viewBox="0 0 73.13 9">
            <title>couponLabel</title>
            <desc>Made with Flow.</desc>
          <path vector-effect="non-scaling-stroke" d="M3.679,9c2.622,0,3.646,-1.123,3.646,-2.683 0,-1.641,-1.139,-2.316,-2.667,-2.666 0,0,-1.379,-0.292,-1.379,-0.292 -0.812,-0.175,-0.986,-0.474,-0.986,-0.811 0,-0.362,0.35,-0.761,1.374,-0.761 1.036,0,1.473,0.524,1.523,1.098 0,0,1.985,0,1.985,0 -0.012,-1.672,-1.486,-2.845,-3.484,-2.845 -2.06,0,-3.409,1.036,-3.409,2.508 0,1.672,1.186,2.296,2.697,2.621 0,0,1.274,0.275,1.274,0.275 0.774,0.162,1.061,0.449,1.061,0.923 0,0.524,-0.437,0.898,-1.636,0.898 -0.949,0,-1.611,-0.424,-1.698,-1.373 0,0,-1.985,0,-1.985,0 0.112,1.884,1.349,3.107,3.684,3.107zM13.118,0.15c0,0,0,0,0,0 0,0,-2.508,0,-2.508,0 0,0,0,0,0,0 0,0,-2.995,8.615,-2.995,8.615 0,0,0,0,0,0 0,0,0,0.125,0,0.125 0,0,0,0,0,0 0,0,2.071,0,2.071,0 0,0,0,0,0,0 0,0,0.512,-1.661,0.512,-1.661 0,0,0,0,0,0 0,0,3.244,0,3.244,0 0,0,0,0,0,0 0,0,0.512,1.661,0.512,1.661 0,0,0,0,0,0 0,0,2.171,0,2.171,0 0,0,0,0,0,0 0,0,0,-0.125,0,-0.125 0,0,0,0,0,0 0,0,-3.007,-8.615,-3.007,-8.615zM10.735,5.51c0,0,0,0,0,0 0,0,1.06,-3.4,1.06,-3.4 0,0,0,0,0,0 0,0,0.05,0,0.05,0 0,0,0,0,0,0 0,0,1.06,3.4,1.06,3.4 0,0,0,0,0,0 0,0,-2.17,0,-2.17,0zM20.029,9c2.622,0,3.646,-1.123,3.646,-2.683 0,-1.641,-1.139,-2.316,-2.667,-2.666 0,0,-1.379,-0.292,-1.379,-0.292 -0.812,-0.175,-0.986,-0.474,-0.986,-0.811 0,-0.362,0.35,-0.761,1.374,-0.761 1.036,0,1.473,0.524,1.523,1.098 0,0,1.985,0,1.985,0 -0.012,-1.672,-1.486,-2.845,-3.484,-2.845 -2.06,0,-3.409,1.036,-3.409,2.508 0,1.672,1.186,2.296,2.697,2.621 0,0,1.274,0.275,1.274,0.275 0.774,0.162,1.061,0.449,1.061,0.923 0,0.524,-0.437,0.898,-1.636,0.898 -0.949,0,-1.611,-0.424,-1.698,-1.373 0,0,-1.985,0,-1.985,0 0.112,1.884,1.349,3.107,3.684,3.107zM24.71,8.89c0,0,0,0,0,0 0,0,1.959,0,1.959,0 0,0,0,0,0,0 0,0,0,-3.384,0,-3.384 0,0,0,0,0,0 0,0,3.894,0,3.894,0 0,0,0,0,0,0 0,0,0,-1.748,0,-1.748 0,0,0,0,0,0 0,0,-3.894,0,-3.894,0 0,0,0,0,0,0 0,0,0,-1.86,0,-1.86 0,0,0,0,0,0 0,0,4.281,0,4.281,0 0,0,0,0,0,0 0,0,0,-1.748,0,-1.748 0,0,0,0,0,0 0,0,-6.24,0,-6.24,0 0,0,0,0,0,0 0,0,0,8.74,0,8.74zM32.165,8.89c0,0,0,0,0,0 0,0,5.93,0,5.93,0 0,0,0,0,0,0 0,0,0,-1.748,0,-1.748 0,0,0,0,0,0 0,0,-3.97,0,-3.97,0 0,0,0,0,0,0 0,0,0,-6.992,0,-6.992 0,0,0,0,0,0 0,0,-1.96,0,-1.96,0 0,0,0,0,0,0 0,0,0,8.74,0,8.74zM42.69,9c2.809,0,4.245,-1.984,4.245,-4.48 0,-2.508,-1.436,-4.48,-4.245,-4.48 -2.822,0,-4.245,1.972,-4.245,4.48 0,2.496,1.423,4.48,4.245,4.48zM42.69,7.23c-1.447,0,-2.245,-0.949,-2.245,-2.71 0,-1.761,0.786,-2.71,2.245,-2.71 1.447,0,2.245,0.949,2.245,2.71 0,1.761,-0.798,2.71,-2.245,2.71zM49.268,8.89c0,0,0,0,0,0 0,0,2.535,0,2.535,0 0,0,0,0,0,0 0,0,1.261,-5.781,1.261,-5.781 0,0,0,0,0,0 0,0,0.05,0,0.05,0 0,0,0,0,0,0 0,0,1.224,5.781,1.224,5.781 0,0,0,0,0,0 0,0,2.535,0,2.535,0 0,0,0,0,0,0 0,0,1.998,-8.615,1.998,-8.615 0,0,0,0,0,0 0,0,0,-0.125,0,-0.125 0,0,0,0,0,0 0,0,-2.085,0,-2.085,0 0,0,0,0,0,0 0,0,-1.149,6.031,-1.149,6.031 0,0,0,0,0,0 0,0,-0.05,0,-0.05,0 0,0,0,0,0,0 0,0,-1.423,-6.031,-1.423,-6.031 0,0,0,0,0,0 0,0,-2.173,0,-2.173,0 0,0,0,0,0,0 0,0,-1.398,6.031,-1.398,6.031 0,0,0,0,0,0 0,0,-0.05,0,-0.05,0 0,0,0,0,0,0 0,0,-1.161,-6.031,-1.161,-6.031 0,0,0,0,0,0 0,0,-2.11,0,-2.11,0 0,0,0,0,0,0 0,0,0,0.125,0,0.125 0,0,0,0,0,0 0,0,1.998,8.615,1.998,8.615zM59.3,8.885c0,0,0,0,0,0 0,0,6.205,0,6.205,0 0,0,0,0,0,0 0,0,0,-1.723,0,-1.723 0,0,0,0,0,0 0,0,-3.633,0,-3.633,0 0,0,0,0,0,0 0,0,0,-0.05,0,-0.05 0,0,0,0,0,0 0,0,2.01,-1.873,2.01,-1.873 1.049,-0.986,1.486,-1.748,1.486,-2.66 0,-1.523,-1.236,-2.585,-3.021,-2.585 -1.835,0,-3.071,1.074,-3.071,2.972 0,0,1.873,0,1.873,0 0,-0.911,0.549,-1.274,1.199,-1.274 0.662,0,1.061,0.387,1.061,0.949 0,0.624,-0.362,1.099,-1.248,1.935 0,0,-2.859,2.734,-2.859,2.734 0,0,0,0,0,0 0,0,0,1.573,0,1.573zM69.71,9c2.384,0,3.42,-1.897,3.42,-4.506 0,-2.596,-1.036,-4.494,-3.42,-4.494 -2.384,0,-3.42,1.897,-3.42,4.494 0,2.609,1.036,4.506,3.42,4.506zM69.71,7.3c-1.086,0,-1.46,-0.898,-1.46,-2.806 0,-1.896,0.387,-2.794,1.46,-2.794 1.073,0,1.46,0.898,1.46,2.794 0,1.908,-0.374,2.806,-1.46,2.806zM69.71,7.3">
            </path>
          </svg>
          <div class="flow-border couponlabel-border"></div>
        </div><div class="flow-layer arrow">
          <svg class="arrow-svg" preserveAspectRatio="none" viewBox="0 0 11 26">
            <title>arrow</title>
            <desc>Made with Flow.</desc>
          <path vector-effect="non-scaling-stroke" d="M0,0c0,0,0,0,0,0 0,0,11,13,11,13 0,0,0,0,0,0 0,0,-11,13,-11,13 0,0,0,0,0,0 0,0,0,-11.556,0,-11.556 0,0,0,0,0,0 0,0,0,-2.889,0,-2.889 0,0,0,0,0,0 0,0,0,-11.556,0,-11.556zM0,0">
            </path>
          </svg>
          <div class="flow-border arrow-border"></div>
        </div>    <div class="flow-border usecode-border"></div>
    </div>
    <div class="flow-layer blink">
        <div class="flow-layer rectangle_copy_13_copy">
          <svg class="rectangle_copy_13_copy-svg" preserveAspectRatio="none" viewBox="0 0 2 10">
            <title>Rectangle Copy 13_copy</title>
            <desc>Made with Flow.</desc>
          <path vector-effect="non-scaling-stroke" d="M0,0c0,0,0,0,0,0 0,0,2,0,2,0 0,0,0,0,0,0 0,0,0,10,0,10 0,0,0,0,0,0 0,0,-2,0,-2,0 0,0,0,0,0,0 0,0,0,-10,0,-10zM0,0">
            </path>
          </svg>
          <div class="flow-border rectangle_copy_13_copy-border"></div>
        </div><div class="flow-layer rectangle_copy_7_copy">
          <svg class="rectangle_copy_7_copy-svg" preserveAspectRatio="none" viewBox="0 0 2 10">
            <title>Rectangle Copy 7_copy</title>
            <desc>Made with Flow.</desc>
          <path vector-effect="non-scaling-stroke" d="M0,0c0,0,0,0,0,0 0,0,2,0,2,0 0,0,0,0,0,0 0,0,0,10,0,10 0,0,0,0,0,0 0,0,-2,0,-2,0 0,0,0,0,0,0 0,0,0,-10,0,-10zM0,0">
            </path>
          </svg>
          <div class="flow-border rectangle_copy_7_copy-border"></div>
        </div><div class="flow-layer rectangle_copy_3_copy">
          <svg class="rectangle_copy_3_copy-svg" preserveAspectRatio="none" viewBox="0 0 2 10">
            <title>Rectangle Copy 3_copy</title>
            <desc>Made with Flow.</desc>
          <path vector-effect="non-scaling-stroke" d="M0,0c0,0,0,0,0,0 0,0,2,0,2,0 0,0,0,0,0,0 0,0,0,10,0,10 0,0,0,0,0,0 0,0,-2,0,-2,0 0,0,0,0,0,0 0,0,0,-10,0,-10zM0,0">
            </path>
          </svg>
          <div class="flow-border rectangle_copy_3_copy-border"></div>
        </div><div class="flow-layer rectangle_copy_8_copy">
          <svg class="rectangle_copy_8_copy-svg" preserveAspectRatio="none" viewBox="0 0 2 10">
            <title>Rectangle Copy 8_copy</title>
            <desc>Made with Flow.</desc>
          <path vector-effect="non-scaling-stroke" d="M0,0c0,0,0,0,0,0 0,0,2,0,2,0 0,0,0,0,0,0 0,0,0,10,0,10 0,0,0,0,0,0 0,0,-2,0,-2,0 0,0,0,0,0,0 0,0,0,-10,0,-10zM0,0">
            </path>
          </svg>
          <div class="flow-border rectangle_copy_8_copy-border"></div>
        </div><div class="flow-layer rectangle_copy_6_copy">
          <svg class="rectangle_copy_6_copy-svg" preserveAspectRatio="none" viewBox="0 0 2 10">
            <title>Rectangle Copy 6_copy</title>
            <desc>Made with Flow.</desc>
          <path vector-effect="non-scaling-stroke" d="M0,0c0,0,0,0,0,0 0,0,2,0,2,0 0,0,0,0,0,0 0,0,0,10,0,10 0,0,0,0,0,0 0,0,-2,0,-2,0 0,0,0,0,0,0 0,0,0,-10,0,-10zM0,0">
            </path>
          </svg>
          <div class="flow-border rectangle_copy_6_copy-border"></div>
        </div><div class="flow-layer rectangle_copy_12_copy">
          <svg class="rectangle_copy_12_copy-svg" preserveAspectRatio="none" viewBox="0 0 2 10">
            <title>Rectangle Copy 12_copy</title>
            <desc>Made with Flow.</desc>
          <path vector-effect="non-scaling-stroke" d="M0,0c0,0,0,0,0,0 0,0,2,0,2,0 0,0,0,0,0,0 0,0,0,10,0,10 0,0,0,0,0,0 0,0,-2,0,-2,0 0,0,0,0,0,0 0,0,0,-10,0,-10zM0,0">
            </path>
          </svg>
          <div class="flow-border rectangle_copy_12_copy-border"></div>
        </div><div class="flow-layer rectangle_copy_11_copy">
          <svg class="rectangle_copy_11_copy-svg" preserveAspectRatio="none" viewBox="0 0 2 10">
            <title>Rectangle Copy 11_copy</title>
            <desc>Made with Flow.</desc>
          <path vector-effect="non-scaling-stroke" d="M0,0c0,0,0,0,0,0 0,0,2,0,2,0 0,0,0,0,0,0 0,0,0,10,0,10 0,0,0,0,0,0 0,0,-2,0,-2,0 0,0,0,0,0,0 0,0,0,-10,0,-10zM0,0">
            </path>
          </svg>
          <div class="flow-border rectangle_copy_11_copy-border"></div>
        </div><div class="flow-layer rectangle_copy_4_copy">
          <svg class="rectangle_copy_4_copy-svg" preserveAspectRatio="none" viewBox="0 0 2 10">
            <title>Rectangle Copy 4_copy</title>
            <desc>Made with Flow.</desc>
          <path vector-effect="non-scaling-stroke" d="M0,0c0,0,0,0,0,0 0,0,2,0,2,0 0,0,0,0,0,0 0,0,0,10,0,10 0,0,0,0,0,0 0,0,-2,0,-2,0 0,0,0,0,0,0 0,0,0,-10,0,-10zM0,0">
            </path>
          </svg>
          <div class="flow-border rectangle_copy_4_copy-border"></div>
        </div><div class="flow-layer rectangle_copy_5_copy">
          <svg class="rectangle_copy_5_copy-svg" preserveAspectRatio="none" viewBox="0 0 2 10">
            <title>Rectangle Copy 5_copy</title>
            <desc>Made with Flow.</desc>
          <path vector-effect="non-scaling-stroke" d="M0,0c0,0,0,0,0,0 0,0,2,0,2,0 0,0,0,0,0,0 0,0,0,10,0,10 0,0,0,0,0,0 0,0,-2,0,-2,0 0,0,0,0,0,0 0,0,0,-10,0,-10zM0,0">
            </path>
          </svg>
          <div class="flow-border rectangle_copy_5_copy-border"></div>
        </div><div class="flow-layer rectangle_copy_10_copy">
          <svg class="rectangle_copy_10_copy-svg" preserveAspectRatio="none" viewBox="0 0 2 10">
            <title>Rectangle Copy 10_copy</title>
            <desc>Made with Flow.</desc>
          <path vector-effect="non-scaling-stroke" d="M0,0c0,0,0,0,0,0 0,0,2,0,2,0 0,0,0,0,0,0 0,0,0,10,0,10 0,0,0,0,0,0 0,0,-2,0,-2,0 0,0,0,0,0,0 0,0,0,-10,0,-10zM0,0">
            </path>
          </svg>
          <div class="flow-border rectangle_copy_10_copy-border"></div>
        </div>    <div class="flow-border blink-border"></div>
    </div>
    <div class="flow-layer codecopied">
      <svg class="codecopied-svg" preserveAspectRatio="none" viewBox="0 0 104.17 20.83">
        <title>CODECOPIED</title>
        <desc>Made with Flow.</desc>
      <path vector-effect="non-scaling-stroke" d="M9.843,20.836c5.168,0,8.594,-3.539,9.001,-7.717 0,0,-4.616,0,-4.616,0 -0.348,1.915,-1.655,3.626,-4.384,3.626 -3.368,0,-5.197,-2.205,-5.197,-6.295 0,-4.091,1.829,-6.324,5.197,-6.324 2.845,0,4.181,1.857,4.355,3.8 0,0,4.645,0,4.645,0 -0.29,-4.294,-3.803,-7.92,-9.001,-7.92 -6.533,0,-9.843,4.584,-9.843,10.444 0,5.773,3.31,10.386,9.843,10.386zM30.091,20.836c6.531,0,9.869,-4.613,9.869,-10.415 0,-5.831,-3.338,-10.415,-9.869,-10.415 -6.56,0,-9.869,4.584,-9.869,10.415 0,5.802,3.309,10.415,9.869,10.415zM30.091,16.72c-3.367,0,-5.225,-2.206,-5.225,-6.299 0,-4.093,1.829,-6.299,5.225,-6.299 3.367,0,5.225,2.206,5.225,6.299 0,4.093,-1.858,6.299,-5.225,6.299zM42.5,20.576c0,0,0,0,0,0 0,0,4.559,0,4.559,0 0,0,0,0,0,0 0,0,0,-6.789,0,-6.789 0,0,0,0,0,0 0,0,4.675,0,4.675,0 4.094,0,6.707,-2.93,6.707,-6.818 0,-3.772,-2.555,-6.702,-6.707,-6.702 0,0,-9.233,0,-9.233,0 0,0,0,0,0,0 0,0,0,20.31,0,20.31zM47.066,9.726c0,0,0,0,0,0 0,0,0,-5.428,0,-5.428 0,0,0,0,0,0 0,0,3.775,0,3.775,0 1.858,0,2.962,0.929,2.962,2.671 0,1.858,-1.016,2.758,-2.962,2.758 0,0,-3.775,0,-3.775,0zM60.987,20.576c0,0,0,0,0,0 0,0,4.584,0,4.584,0 0,0,0,0,0,0 0,0,0,-20.31,0,-20.31 0,0,0,0,0,0 0,0,-4.584,0,-4.584,0 0,0,0,0,0,0 0,0,0,20.31,0,20.31zM69.277,20.576c0,0,0,0,0,0 0,0,14.513,0,14.513,0 0,0,0,0,0,0 0,0,0,-4.033,0,-4.033 0,0,0,0,0,0 0,0,-9.956,0,-9.956,0 0,0,0,0,0,0 0,0,0,-4.41,0,-4.41 0,0,0,0,0,0 0,0,9.056,0,9.056,0 0,0,0,0,0,0 0,0,0,-4.062,0,-4.062 0,0,0,0,0,0 0,0,-9.056,0,-9.056,0 0,0,0,0,0,0 0,0,0,-3.743,0,-3.743 0,0,0,0,0,0 0,0,9.956,0,9.956,0 0,0,0,0,0,0 0,0,0,-4.062,0,-4.062 0,0,0,0,0,0 0,0,-14.513,0,-14.513,0 0,0,0,0,0,0 0,0,0,20.31,0,20.31zM86.633,20.576c0,0,0,0,0,0 0,0,7.026,0,7.026,0 6.359,0,10.511,-4.497,10.511,-10.155 0,-6.093,-4.442,-10.155,-10.511,-10.155 0,0,-7.026,0,-7.026,0 0,0,0,0,0,0 0,0,0,20.31,0,20.31zM90.896,16.538c0,0,0,0,0,0 0,0,0,-12.21,0,-12.21 0,0,0,0,0,0 0,0,2.497,0,2.497,0 3.804,0,6.126,1.885,6.126,6.091 0,4.234,-2.323,6.12,-6.126,6.12 0,0,-2.497,0,-2.497,0zM90.896,16.538">
        </path>
      </svg>
      <div class="flow-border codecopied-border"></div>
    </div>
    </div>
    <p class="clicktoview">&lt; click to view code &gt;</p></a>
</div>
<div id="SasDiscount20Timer"></div>

Timeline

A timeline is a set of JS code blocks that conform to the Web Animations API, which is slowly becoming industry-standard.

The Web Animations API can be used in all browsers via a polyfill that will use the full speed native implementation where it exists, and gracefully fall back to a JavaScript implementation otherwise. 

SVG animations (used for shape-specific properties like path) use the <animate> tag, and can be found in the DOM (above).

/**
 * Class representing the SasDiscount20 timeline.
 *
 * Made with Flow
 */
class SasDiscount20 {
    /**
     * Returns the timeline's duration in milliseconds.
     */
    static get duration() { return 1000 }

    static artboardAnimation() {
        // Workaround for Safari bug
        return document.querySelector('#SasDiscount20.flow-artboard').animate({
            backgroundPosition: ['0px', '1px'],
        }, {
            delay: 0,
            duration: 1000,
        });
    }
    static bartopAnimation0() {
        return document.querySelector('#SasDiscount20 .bartop').animate({
            top: ['0.5px', '31px'],
            width: ['340px', '0.01px'],
            height: ['1px', '0.01px'],

        }, {
            delay: 0,
            duration: 150,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bartopAnimation1() {
        return document.querySelector('#SasDiscount20 .bartop').animate({
            top: ['31px', '31px'],
            width: ['0.01px', '0.01px'],
            height: ['0.01px', '0.01px'],

        }, {
            delay: 150,
            duration: 710,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bartopAnimation2() {
        return document.querySelector('#SasDiscount20 .bartop').animate({
            top: ['31px', '0.5px'],
            width: ['0.01px', '340px'],
            height: ['0.01px', '1px'],

        }, {
            delay: 860,
            duration: 140,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static barbottomAnimation0() {
        return document.querySelector('#SasDiscount20 .barbottom').animate({
            width: ['340px', '0.01px'],
            height: ['1px', '0.01px'],
            top: ['59.5px', '31px'],

        }, {
            delay: 0,
            duration: 150,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static barbottomAnimation1() {
        return document.querySelector('#SasDiscount20 .barbottom').animate({
            width: ['0.01px', '0.01px'],
            height: ['0.01px', '0.01px'],
            top: ['31px', '31px'],

        }, {
            delay: 150,
            duration: 710,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static barbottomAnimation2() {
        return document.querySelector('#SasDiscount20 .barbottom').animate({
            width: ['0.01px', '340px'],
            height: ['0.01px', '1px'],
            top: ['31px', '59.5px'],

        }, {
            delay: 860,
            duration: 140,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static mainlabelAnimation0() {
        return document.querySelector('#SasDiscount20 .mainlabel').animate({
            width: ['230.79px', '0.01px'],
            height: ['23px', '0.01px'],
            left: ['120.4px', '166.45px'],
            top: ['29.5px', '29.68px'],

        }, {
            delay: 0,
            duration: 260,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static mainlabelAnimation1() {
        return document.querySelector('#SasDiscount20 .mainlabel').animate({
            opacity: [1, 0],

        }, {
            delay: 0,
            duration: 150,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static mainlabelAnimation2() {
        return document.querySelector('#SasDiscount20 .mainlabel').animate({
            opacity: [0, 0],

        }, {
            delay: 150,
            duration: 710,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static mainlabelAnimation3() {
        return document.querySelector('#SasDiscount20 .mainlabel').animate({
            width: ['0.01px', '0.01px'],
            height: ['0.01px', '0.01px'],
            left: ['166.45px', '166.45px'],
            top: ['29.68px', '29.68px'],

        }, {
            delay: 260,
            duration: 600,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static mainlabelAnimation4() {
        return document.querySelector('#SasDiscount20 .mainlabel').animate({
            width: ['0.01px', '230.79px'],
            height: ['0.01px', '23px'],
            left: ['166.45px', '120.4px'],
            opacity: [0, 1],
            top: ['29.68px', '29.5px'],

        }, {
            delay: 860,
            duration: 140,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static usecodeAnimation0() {
        return document.querySelector('#SasDiscount20 .usecode').animate({
            opacity: [1, 0],

        }, {
            delay: 0,
            duration: 150,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static usecodeAnimation1() {
        return document.querySelector('#SasDiscount20 .usecode').animate({
            left: ['286px', '166.45px'],
            height: ['18px', '0.01px'],
            top: ['30px', '29.68px'],
            width: ['74px', '0.01px'],

        }, {
            delay: 0,
            duration: 260,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static usecodeAnimation2() {
        return document.querySelector('#SasDiscount20 .usecode').animate({
            opacity: [0, 0],

        }, {
            delay: 150,
            duration: 710,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static usecodeAnimation3() {
        return document.querySelector('#SasDiscount20 .usecode').animate({
            left: ['166.45px', '166.45px'],
            height: ['0.01px', '0.01px'],
            top: ['29.68px', '29.68px'],
            width: ['0.01px', '0.01px'],

        }, {
            delay: 260,
            duration: 510,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static usecodeAnimation4() {
        return document.querySelector('#SasDiscount20 .usecode').animate({
            left: ['166.45px', '286px'],
            height: ['0.01px', '18px'],
            top: ['29.68px', '30px'],
            width: ['0.01px', '74px'],

        }, {
            delay: 770,
            duration: 230,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static usecodeAnimation5() {
        return document.querySelector('#SasDiscount20 .usecode').animate({
            opacity: [0, 1],

        }, {
            delay: 860,
            duration: 140,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
static usecodelabelAnimation0() {
    return document.querySelector('#SasDiscount20 .usecodelabel').animate({
        width: ['46.92px', '0.01px'],
        top: ['3.5px', '0px'],
        height: ['7px', '0.01px'],
        left: ['49.46px', '0.01px'],

    }, {
        delay: 0,
        duration: 260,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static usecodelabelAnimation1() {
    return document.querySelector('#SasDiscount20 .usecodelabel').animate({
        width: ['0.01px', '0.01px'],
        top: ['0px', '0px'],
        height: ['0.01px', '0.01px'],
        left: ['0.01px', '0.01px'],

    }, {
        delay: 260,
        duration: 510,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static usecodelabelAnimation2() {
    return document.querySelector('#SasDiscount20 .usecodelabel').animate({
        width: ['0.01px', '46.92px'],
        top: ['0px', '3.5px'],
        height: ['0.01px', '7px'],
        left: ['0.01px', '49.46px'],

    }, {
        delay: 770,
        duration: 230,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static couponlabelAnimation0() {
    return document.querySelector('#SasDiscount20 .couponlabel').animate({
        top: ['13.5px', '0.01px'],
        width: ['73.13px', '0.01px'],
        left: ['36.57px', '0.01px'],
        height: ['9px', '0.01px'],

    }, {
        delay: 0,
        duration: 260,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static couponlabelAnimation1() {
    return document.querySelector('#SasDiscount20 .couponlabel').animate({
        top: ['0.01px', '0.01px'],
        width: ['0.01px', '0.01px'],
        left: ['0.01px', '0.01px'],
        height: ['0.01px', '0.01px'],

    }, {
        delay: 260,
        duration: 510,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static couponlabelAnimation2() {
    return document.querySelector('#SasDiscount20 .couponlabel').animate({
        top: ['0.01px', '13.5px'],
        width: ['0.01px', '73.13px'],
        left: ['0.01px', '36.57px'],
        height: ['0.01px', '9px'],

    }, {
        delay: 770,
        duration: 230,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static arrowAnimation0() {
    return document.querySelector('#SasDiscount20 .arrow').animate({
        height: ['26px', '0.01px'],
        left: ['83.5px', '0.02px'],
        top: ['9px', '0px'],
        width: ['11px', '0.01px'],

    }, {
        delay: 0,
        duration: 260,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static arrowAnimation1() {
    return document.querySelector('#SasDiscount20 .arrow').animate({
        height: ['0.01px', '0.01px'],
        left: ['0.02px', '0.02px'],
        top: ['0px', '0px'],
        width: ['0.01px', '0.01px'],

    }, {
        delay: 260,
        duration: 510,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static arrowAnimation2() {
    return document.querySelector('#SasDiscount20 .arrow').animate({
        height: ['0.01px', '26px'],
        left: ['0.02px', '83.5px'],
        top: ['0px', '9px'],
        width: ['0.01px', '11px'],

    }, {
        delay: 770,
        duration: 230,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_13_copyAnimation0() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_13_copy').animate({
        opacity: [0, 1],

    }, {
        delay: 210,
        duration: 80,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_13_copyAnimation1() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_13_copy').animate({
        opacity: [1, 1],

    }, {
        delay: 290,
        duration: 40,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_13_copyAnimation2() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_13_copy').animate({
        opacity: [1, 0],

    }, {
        delay: 330,
        duration: 60,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_7_copyAnimation0() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_7_copy').animate({
        opacity: [0, 1],

    }, {
        delay: 180,
        duration: 90,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_7_copyAnimation1() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_7_copy').animate({
        opacity: [1, 1],

    }, {
        delay: 270,
        duration: 40,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_7_copyAnimation2() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_7_copy').animate({
        opacity: [1, 0],

    }, {
        delay: 310,
        duration: 70,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_3_copyAnimation0() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_3_copy').animate({
        opacity: [0, 1],

    }, {
        delay: 170,
        duration: 80,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_3_copyAnimation1() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_3_copy').animate({
        opacity: [1, 1],

    }, {
        delay: 250,
        duration: 40,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_3_copyAnimation2() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_3_copy').animate({
        opacity: [1, 0],

    }, {
        delay: 290,
        duration: 80,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_8_copyAnimation0() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_8_copy').animate({
        opacity: [0, 1],

    }, {
        delay: 150,
        duration: 80,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_8_copyAnimation1() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_8_copy').animate({
        opacity: [1, 1],

    }, {
        delay: 230,
        duration: 40,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_8_copyAnimation2() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_8_copy').animate({
        opacity: [1, 0],

    }, {
        delay: 270,
        duration: 90,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_6_copyAnimation0() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_6_copy').animate({
        opacity: [0, 1],

    }, {
        delay: 130,
        duration: 90,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_6_copyAnimation1() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_6_copy').animate({
        opacity: [1, 1],

    }, {
        delay: 220,
        duration: 40,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_6_copyAnimation2() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_6_copy').animate({
        opacity: [1, 0],

    }, {
        delay: 260,
        duration: 100,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_12_copyAnimation0() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_12_copy').animate({
        opacity: [0, 1],

    }, {
        delay: 110,
        duration: 90,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_12_copyAnimation1() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_12_copy').animate({
        opacity: [1, 1],

    }, {
        delay: 200,
        duration: 50,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_12_copyAnimation2() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_12_copy').animate({
        opacity: [1, 0],

    }, {
        delay: 250,
        duration: 100,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_11_copyAnimation0() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_11_copy').animate({
        opacity: [0, 1],

    }, {
        delay: 90,
        duration: 100,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_11_copyAnimation1() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_11_copy').animate({
        opacity: [1, 1],

    }, {
        delay: 190,
        duration: 50,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_11_copyAnimation2() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_11_copy').animate({
        opacity: [1, 0],

    }, {
        delay: 240,
        duration: 100,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_4_copyAnimation0() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_4_copy').animate({
        opacity: [0, 1],

    }, {
        delay: 90,
        duration: 100,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_4_copyAnimation1() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_4_copy').animate({
        opacity: [1, 1],

    }, {
        delay: 190,
        duration: 50,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_4_copyAnimation2() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_4_copy').animate({
        opacity: [1, 0],

    }, {
        delay: 240,
        duration: 90,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_5_copyAnimation0() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_5_copy').animate({
        opacity: [0, 1],

    }, {
        delay: 80,
        duration: 100,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_5_copyAnimation1() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_5_copy').animate({
        opacity: [1, 1],

    }, {
        delay: 180,
        duration: 50,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_5_copyAnimation2() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_5_copy').animate({
        opacity: [1, 0],

    }, {
        delay: 230,
        duration: 90,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_10_copyAnimation0() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_10_copy').animate({
        opacity: [0, 1],

    }, {
        delay: 70,
        duration: 100,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_10_copyAnimation1() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_10_copy').animate({
        opacity: [1, 1],

    }, {
        delay: 170,
        duration: 40,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static rectangle_copy_10_copyAnimation2() {
    return document.querySelector('#SasDiscount20 .rectangle_copy_10_copy').animate({
        opacity: [1, 0],

    }, {
        delay: 210,
        duration: 100,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
    static codecopiedAnimation0() {
        return document.querySelector('#SasDiscount20 .codecopied').animate({
            height: ['20.83px', '27.62px'],
            opacity: [0, 1],
            width: ['104.17px', '138.03px'],

        }, {
            delay: 260,
            duration: 140,
            easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static codecopiedAnimation1() {
        return document.querySelector('#SasDiscount20 .codecopied').animate({
            height: ['27.62px', '27.62px'],
            opacity: [1, 1],
            width: ['138.03px', '138.03px'],

        }, {
            delay: 400,
            duration: 360,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static codecopiedAnimation2() {
        return document.querySelector('#SasDiscount20 .codecopied').animate({
            height: ['27.62px', '20.83px'],
            opacity: [1, 0],
            width: ['138.03px', '104.17px'],

        }, {
            delay: 760,
            duration: 140,
            easing: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
            composite: 'add',
            fill: 'forwards',
        });
    }

    /**
     * Creates and returns all animations for this timeline.
     */
    static createAllAnimations() {
        return [
            this.artboardAnimation(),
            this.bartopAnimation0(),
            this.bartopAnimation1(),
            this.bartopAnimation2(),
            this.barbottomAnimation0(),
            this.barbottomAnimation1(),
            this.barbottomAnimation2(),
            this.mainlabelAnimation0(),
            this.mainlabelAnimation1(),
            this.mainlabelAnimation2(),
            this.mainlabelAnimation3(),
            this.mainlabelAnimation4(),
            this.usecodeAnimation0(),
            this.usecodeAnimation1(),
            this.usecodeAnimation2(),
            this.usecodeAnimation3(),
            this.usecodeAnimation4(),
            this.usecodeAnimation5(),
            this.usecodelabelAnimation0(),
            this.usecodelabelAnimation1(),
            this.usecodelabelAnimation2(),
            this.couponlabelAnimation0(),
            this.couponlabelAnimation1(),
            this.couponlabelAnimation2(),
            this.arrowAnimation0(),
            this.arrowAnimation1(),
            this.arrowAnimation2(),
            this.rectangle_copy_13_copyAnimation0(),
            this.rectangle_copy_13_copyAnimation1(),
            this.rectangle_copy_13_copyAnimation2(),
            this.rectangle_copy_7_copyAnimation0(),
            this.rectangle_copy_7_copyAnimation1(),
            this.rectangle_copy_7_copyAnimation2(),
            this.rectangle_copy_3_copyAnimation0(),
            this.rectangle_copy_3_copyAnimation1(),
            this.rectangle_copy_3_copyAnimation2(),
            this.rectangle_copy_8_copyAnimation0(),
            this.rectangle_copy_8_copyAnimation1(),
            this.rectangle_copy_8_copyAnimation2(),
            this.rectangle_copy_6_copyAnimation0(),
            this.rectangle_copy_6_copyAnimation1(),
            this.rectangle_copy_6_copyAnimation2(),
            this.rectangle_copy_12_copyAnimation0(),
            this.rectangle_copy_12_copyAnimation1(),
            this.rectangle_copy_12_copyAnimation2(),
            this.rectangle_copy_11_copyAnimation0(),
            this.rectangle_copy_11_copyAnimation1(),
            this.rectangle_copy_11_copyAnimation2(),
            this.rectangle_copy_4_copyAnimation0(),
            this.rectangle_copy_4_copyAnimation1(),
            this.rectangle_copy_4_copyAnimation2(),
            this.rectangle_copy_5_copyAnimation0(),
            this.rectangle_copy_5_copyAnimation1(),
            this.rectangle_copy_5_copyAnimation2(),
            this.rectangle_copy_10_copyAnimation0(),
            this.rectangle_copy_10_copyAnimation1(),
            this.rectangle_copy_10_copyAnimation2(),
            this.codecopiedAnimation0(),
            this.codecopiedAnimation1(),
            this.codecopiedAnimation2(),
        ]
    }
}

SasDiscount20.allShapes = [
    document.querySelector("#SasDiscount20 .bartop-svg"),
    document.querySelector("#SasDiscount20 .barbottom-svg"),
    document.querySelector("#SasDiscount20 .mainlabel-svg"),
    document.querySelector("#SasDiscount20 .usecodelabel-svg"),
    document.querySelector("#SasDiscount20 .couponlabel-svg"),
    document.querySelector("#SasDiscount20 .arrow-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_13_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_7_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_3_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_8_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_6_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_12_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_11_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_4_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_5_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_10_copy-svg"),
    document.querySelector("#SasDiscount20 .codecopied-svg"),
    document.querySelector("#SasDiscount20 .bartop-svg"),
    document.querySelector("#SasDiscount20 .barbottom-svg"),
    document.querySelector("#SasDiscount20 .mainlabel-svg"),
    document.querySelector("#SasDiscount20 .usecodelabel-svg"),
    document.querySelector("#SasDiscount20 .couponlabel-svg"),
    document.querySelector("#SasDiscount20 .arrow-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_13_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_7_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_3_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_8_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_6_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_12_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_11_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_4_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_5_copy-svg"),
    document.querySelector("#SasDiscount20 .rectangle_copy_10_copy-svg"),
    document.querySelector("#SasDiscount20 .codecopied-svg"),
]

Object.freeze(SasDiscount20)

Style

The style for all layers in the animation. Split into two components, the basic layer types and custom styles.

Basic Layer Styles

.flow-layer {
    position: absolute;
    overflow: visible;
    box-sizing: border-box;
    border-width: 0px;
}

.flow-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    border-width: 0px;
}

.flow-border {
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    border-style: solid;
    border-width: 0px;
}

path {
    fill-rule: evenodd; 
}

svg {
   overflow: visible;
}

Custom Styles

.flow-layer {
    position: absolute;
    overflow: visible;
    box-sizing: border-box;
    border-width: 0px;
}

.flow-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    border-width: 0px;
}

.flow-border {
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    border-style: solid;
    border-width: 0px;
}

#SasDiscount20.flow-artboard {
    width: 340px;
    height: 60px;
    overflow: hidden;
    position: relative;
    padding: 0px;
    margin: 0px auto;
    background-color: #FFFFFF;
}

#SasDiscount20 .bartop {
    width: 340px;
    height: 1px;
    left: 170px;
    top: 0.5px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .bartop-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FD0178;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}

#SasDiscount20 .barbottom {
    width: 340px;
    height: 1px;
    left: 170px;
    top: 59.5px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .barbottom-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FD0178;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}

#SasDiscount20 .mainlabel {
    width: 230.79px;
    height: 23px;
    left: 120.4px;
    top: 29.5px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .mainlabel-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    stroke: #0000FF;
    fill: #00000000;
    stroke-miterlimit: 10;
}

#SasDiscount20 .usecode {
    width: 74px;
    height: 18px;
    left: 286px;
    top: 30px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .usecodelabel {
    width: 46.92px;
    height: 7px;
    left: 49.46px;
    top: 3.5px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .usecodelabel-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FF0078;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}
#SasDiscount20 .couponlabel {
    width: 73.13px;
    height: 9px;
    left: 36.57px;
    top: 13.5px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .couponlabel-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FF0078;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}
#SasDiscount20 .arrow {
    width: 11px;
    height: 26px;
    left: 83.5px;
    top: 9px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .arrow-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #0000FF;
    stroke-linecap: square;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}

#SasDiscount20 .blink {
    width: 165px;
    height: 60px;
    left: 170px;
    top: 30px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .rectangle_copy_13_copy {
    width: 2px;
    height: 10px;
    left: 2px;
    top: 49px;
    transform: translate(-50%, -50%) rotate(-145deg);
    opacity: 0;
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .rectangle_copy_13_copy-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FD017880;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}
#SasDiscount20 .rectangle_copy_7_copy {
    width: 2px;
    height: 10px;
    left: 45px;
    top: 53px;
    transform: translate(-50%, -50%) rotate(-159deg);
    opacity: 0;
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .rectangle_copy_7_copy-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FD0178CC;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}
#SasDiscount20 .rectangle_copy_3_copy {
    width: 2px;
    height: 10px;
    left: 84px;
    top: 55px;
    transform: translate(-50%, -50%) rotate(-180deg);
    opacity: 0;
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .rectangle_copy_3_copy-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FD0178;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}
#SasDiscount20 .rectangle_copy_8_copy {
    width: 2px;
    height: 10px;
    left: 126px;
    top: 53px;
    transform: translate(-50%, -50%) rotate(159deg);
    opacity: 0;
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .rectangle_copy_8_copy-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FD0178CC;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}
#SasDiscount20 .rectangle_copy_6_copy {
    width: 2px;
    height: 10px;
    left: 163px;
    top: 50px;
    transform: translate(-50%, -50%) rotate(144deg);
    opacity: 0;
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .rectangle_copy_6_copy-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FD017880;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}
#SasDiscount20 .rectangle_copy_12_copy {
    width: 2px;
    height: 10px;
    left: 164px;
    top: 10px;
    transform: translate(-50%, -50%) rotate(-144deg);
    opacity: 0;
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .rectangle_copy_12_copy-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FD017880;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}
#SasDiscount20 .rectangle_copy_11_copy {
    width: 2px;
    height: 10px;
    left: 126px;
    top: 7px;
    transform: translate(-50%, -50%) rotate(-159deg);
    opacity: 0;
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .rectangle_copy_11_copy-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FD0178CC;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}
#SasDiscount20 .rectangle_copy_4_copy {
    width: 2px;
    height: 10px;
    left: 84px;
    top: 5px;
    transform: translate(-50%, -50%) rotate(-180deg);
    opacity: 0;
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .rectangle_copy_4_copy-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FD0178;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}
#SasDiscount20 .rectangle_copy_5_copy {
    width: 2px;
    height: 10px;
    left: 42px;
    top: 7px;
    transform: translate(-50%, -50%) rotate(-201deg);
    opacity: 0;
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .rectangle_copy_5_copy-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FD0178CC;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}
#SasDiscount20 .rectangle_copy_10_copy {
    width: 2px;
    height: 10px;
    left: 1px;
    top: 11px;
    transform: translate(-50%, -50%) rotate(-215deg);
    opacity: 0;
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .rectangle_copy_10_copy-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FD017880;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}

#SasDiscount20 .codecopied {
    width: 104.17px;
    height: 20.83px;
    left: 170px;
    top: 28px;
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
    background-color: #00000000;
    overflow: visible;
}

#SasDiscount20 .codecopied-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    stroke: #0000FF;
    fill: #0000FF00;
    stroke-miterlimit: 10;
}

path {
    fill-rule: evenodd; 
}

svg {
   overflow: visible;
}

Try Flow For Yourself

Subscribe to our newsletter

Love UI Animation? Sign up to receive the latest news, articles, tutorials and resources.

We're diligent and don't spam.

Recent MovingUI Articles

MovingUI is a publication sponsered by FLOW focues on UI animation for IOS and the web...


Animate Your Portfolio with Sketch & Flow

Learn the best ways to use motion to help sell your work and step-up your portfolio.

Read on Medium



Discuss. Connect. Share.

background Made with Flow.
underscore Made with Flow.
line2 Made with Flow.
line1 Made with Flow.
circle Made with Flow.
hit Made with Flow.

result(s) found for “”.