Animate cool page effects with HTML and JS


EPIC’s Karim Maaloul explains how you can rapidly add Crop Trust’s distinctive TweenMax-powered animation to your page and customise the effect



The triangle element

A distinctive element of the Crop Trust project is a triangular overlay animation used in various places to add a subtle dynamic motif. Rather nicely the code for this effect, known as ‘Triangles Life’, can be viewed, edited and customised on CodePen. Over the next few steps we’ll look at how this code can be employed quickly and simply within your own HTML.

Download the scripts

In terms of the script and libraries required, you’ll need to download the main TrianglesLife.js JavaScript via the GitHub listing at Additionally the effect requires TweenMax, Greensock’s JS library (TweenMax.min.js) for animating DOM elements that may be downloaded from Both of these files can then be copied into the root of your example page.

Include within your HTML

Next you’ll want to include those scripts within the head of your HTML document. Should you prefer here, the latest TweenMax can be linked to via CDN instead with as shown below. Beyond this, our example page structure is very simply a <canvas> element required for drawing the animations, defined with a unique ID for styling and passing into the code:

001 HTML:     
002 <script src='TweenMax.min.js'></script> 
003 <!-- OR via the latest CDN as follows     
004 <script src=""></script> -->  
005 <script src='TrianglesLife.js'></script>     
006 </head> 
007 <body>     
008 <canvas id="myCanvas"></canvas> 
009 </body> 

Style the canvas

We now want to style that <canvas> element within our CSS. Here you can define a specific width and height, however we’ll stretch the canvas across the viewport and maximise the size by setting both width and height properties to 100%. By making the background a dark colour the colours are more contrasting, but equally the background could be transparent or overlaying an image.

001 CSS:     
002 #myCanvas {
003 position:absolute;     
004 margin: auto;
005 width: 100%;     
006 height: 100%
007 background-color : #222;     
008 }

Initialise the effect

With the main drawing functions already written and attached to the page, it’s now a case of initialising the various parameters or ‘params’ before calling the start function. You can see here the various options passed and commented so you can see how to adjust them to edit the effect. Aside from setting triangle width and height, you can also adjust the ‘trail’ – the amount of connected triangles and how long they take to spawn or fade. In addition you can pass a variety of hex codes to dictate the preferred colours:

001 <script>     
002 var params = {     
003 canvasId : 'myCanvas',    // id of your canvas
004 triangleWidth : 16,      // width     of each triangle     
005 triangleHeight : 18,     // height of each triangle     
006 trailMaxLength : 12,    // Maximum of connected triangles to form a trail
007 trailIntervalCreation : 200,  //     Delay before the creation of a new     trail (in milliseconds)     
008 delayBeforeDisappear : 2,     //     Delay before a trail starts to         disappear (in seconds) 
009 colors : ['#eb9000', '#f6b400','#440510',     
010 '#8a0a08','#91dffa'] // Colors you     want to use for the triangles     
011 }; 
012 var tl = new TrianglesLife(params);
013 tl.start();     
014 </script>

Save, test and preview

Now we will save the page now and test our work inside of our chosen browser. Alternatively, you can check out the CodePen at as it offers a live preview with fully commented code that you can customise and experiment with on the fly. What’s more, the added GUI offers us some additional controls for changing the parameter values during runtime, and this provides us with an intuitive way to observe cause and effect for how the animation responds to the various tweaks on the page.