Implementation of an After Effects animation to code

user_7924933 0
Viewed 116

I'm developing an webapp that has some fancy animations on the homepage, but I would like to approach it with performance and responsive constraints in mind.

As an input for this animation, I have a rather complex video animation made on Adobe After Effects that simulates a wave movement. I would like to translate this animation to code using SVGs and JS animation. What I have now is a static SVG image and I need to animate it to looks like the video.

I tried https://greensock.com/morphsvg/, which gives me a not too bad animation but it's a bit of a tricky process to find the right shapes of SVG to reproduce the video. Then I came across https://lottiefiles.com/plugins/after-effects, but it doesn't support the After Effects effects that are in the animation such as Wave Warp.

I am therefore looking for advice on how to make this animation a success.

EDIT: Here is what I would like to achieve https://streamable.com/bwfmm3.

web animation svg javascript
1 Answers

Let me try to show the technique of creating waves and animating them without using bulky frameworks.

Step #1.

We draw in a vector editor or take the finished code of one wave

<svg class="svg1"
   xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none">
 <defs>  
     <!-- The original wave is not visible as it is in the <defs> section -->
  <path 
    id="Marine-wave"
     d="m -160,44.4 c 30,0 58,
        -18 87.7,-18 30.3,0 58.3,
        18 87.3,18 30,0 58,-18 88,
        -18 30,0 58,18 88,18 l 0,
        34.5 -351,0 z" />
    
 </defs>
  <g class="waves"> 
      <!-- First copy wave -->
   <use xlink:href="#Marine-wave" x="50" y="3" fill="#4579e2">
   
   </use>
     
  </g>
</svg>

Step #2.

Add two more copies of the wave. You can add as many waves as you like.

<svg class="svg1"
   xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none">
 <defs>  
     <!-- The original wave is not visible as it is in the <defs> section -->
  <path 
    id="Marine-wave"
     d="m -160,44.4 c 30,0 58,
        -18 87.7,-18 30.3,0 58.3,
        18 87.3,18 30,0 58,-18 88,
        -18 30,0 58,18 88,18 l 0,
        34.5 -351,0 z" />
    
 </defs>
  <g class="waves"> 
         <!-- Third wave copy -->
   <use xlink:href="#Marine-wave" x="50" y="-3" fill="#4579e2">
   </use> 
         <!-- Second wave copy -->
  <use xlink:href="#Marine-wave" x="50" y="-1" fill="#3461c1"  >
   </use> 
      <!-- First copy wave -->
   <use xlink:href="#Marine-wave" x="50" y="2" fill="#2d55aa"  >
   </use>
     
  </g>
</svg>

Step #3.

In the next step, change the x and y coordinates for the <use> tag to move the waves relative to each other.

<svg class="svg1"
   xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none">
 <defs>  
     <!-- The original wave is not visible as it is in the <defs> section -->
  <path 
    id="Marine-wave"
     d="m -160,44.4 c 30,0 58,
        -18 87.7,-18 30.3,0 58.3,
        18 87.3,18 30,0 58,-18 88,
        -18 30,0 58,18 88,18 l 0,
        34.5 -351,0 z" />
    
 </defs>
  <g class="waves"> 
         <!-- Third wave copy -->
   <use xlink:href="#Marine-wave" x="-50" y="0" fill="#4579e2">
   </use> 
         <!-- Second wave copy -->
  <use xlink:href="#Marine-wave" x="0" y="2" fill="#3461c1"  >
   </use> 
      <!-- First copy wave -->
   <use xlink:href="#Marine-wave" x="50" y="4" fill="#2d55aa"  >
   </use>
     
  </g>
</svg>

Step #4.

Add animation of horizontal wave displacement

<animateTransform attributeName="transform" type="translate"
   begin="0s" dur="6s" values="50;25;0;25;50;25;50" repeatcount="indefinite" /> 


<svg class="svg1"
   xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none">
 <defs>  
     <!-- The original wave is not visible as it is in the <defs> section -->
  <path 
    id="Marine-wave"
     d="m -160,44.4 c 30,0 58,
        -18 87.7,-18 30.3,0 58.3,
        18 87.3,18 30,0 58,-18 88,
        -18 30,0 58,18 88,18 l 0,
        34.5 -351,0 z" />
    
 </defs>
  <g class="waves"> 
         <!-- Third wave copy -->
   <use xlink:href="#Marine-wave" x="-50" y="0" fill="#4579e2"> 
         <!-- Add animation of horizontal wave displacement Third wave copy -->
      <animateTransform attributeName="transform" type="translate" begin="0s" dur="6s" values="95;25;95" repeatcount="indefinite" /> 
   </use> 
         <!-- Second wave copy -->
  <use xlink:href="#Marine-wave" x="0" y="2" fill="#3461c1" opacity="0.75" >
   </use> 
      <!-- First copy wave -->
   <use xlink:href="#Marine-wave" x="50" y="4" fill="#2d55aa" opacity="0.75"  >
   </use>
     
  </g>
</svg>

Step #5.

Add animation of horizontal displacement for other waves To fine-tune the time intervals of the wave animation, add the attributes:

values="95;25;50;95"
keyTimes="0;0.45;0.70;1"


<svg class="svg1"
   xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none">
 <defs>  
     <!-- The original wave is not visible as it is in the <defs> section -->
  <path 
    id="Marine-wave"
     d="m -160,44.4 c 30,0 58,
        -18 87.7,-18 30.3,0 58.3,
        18 87.3,18 30,0 58,-18 88,
        -18 30,0 58,18 88,18 l 0,
        34.5 -351,0 z" />
    
 </defs>
  <g class="waves"> 
         <!-- Third wave copy -->
   <use xlink:href="#Marine-wave" x="-50" y="0" fill="#4579e2"> 
         <!-- Add animation of horizontal wave displacement Third wave copy -->
      <animateTransform attributeName="transform" type="translate" begin="0s" dur="4s" values="95;25;95" repeatcount="indefinite" /> 
   </use> 
         <!-- Second wave copy -->
  <use xlink:href="#Marine-wave" x="0" y="2" fill="#3461c1" opacity="1" > 
      <animateTransform attributeName="transform" type="translate" begin="0s" dur="4s" values="25;95;25" repeatcount="indefinite" /> 
   </use> 
      <!-- First copy wave -->
   <use xlink:href="#Marine-wave" x="70" y="6" fill="#2d55aa" opacity="1"  >
       <animateTransform
        attributeName="transform"
        type="translate"
        begin="0s"
        dur="8s"
        values="95;25;50;95"
        keyTimes="0;0.45;0.70;1"
        repeatcount="indefinite" /> 
   </use>
     
  </g>
</svg>

user_73948710
Related