How These Were Made

They look great, The fishies are a web object animated using jQuery the canvas width is 1160x576

Not sure about the second slide size.

Its a WebObject with Canvas on it. If you check it in the console you end up here...
https://www.amnvohra.com/projects/fish/story_content/WebObjects/5te71AC6ooa/index.html 
The size he uses is 1160x576..
The Canvas is called "jsi-ripple-container", so probably somewhere a Javascript ripple library called something like that that handles all.

And a bit of search... here it is... the original...
https://codepen.io/K-T/pen/Ldgdab

jQuery in fact is the only library used in this.
Every fish in fact is a geometrical calculation and draws on Canvas using this kind of code.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
A function createGoldfishes( ) creates them and each instance has specific settings in code.
GOLDFISH.prototype = {
OFFSET : 30,
RIPPLE_INTERVAL : 20,
VELOCITY_LIMIT : 0.3,

In the second slide it just another SlideLayer on top of the previous one.

Kind regards,
Math

All this info you can indeed find in the browsers developers tools. The Console, Source and Elements sections indeed the most usefull. Codepen is a great source of inspiration. Get a account there and you can find kind all kind of magic stuff. If you want to simply embed something like Ahman did, you can download/export the source and use it in a folder as an embedded WebObject in Storyline. However it is better to use those as reference only and build something alike in your own.

Embedding WebObjects is easy. If you have a working external index.html file in a separate folder you can just point to that file and it works. If you want to control elements of the WebObject with triggers in Storyline it is somewhat more complicated.

For both options you can find solutions on the forum though.
https://community.articulate.com/discussions/articulate-storyline/how-to-add-jquery-or-anyother-external-javascript-library-to-storyline
This post of mine shows how to add external javascript libraries to Storyline. Under the subtitle 'Another Approach' you find an explanation on how to use a WebObject for this. The same way it works for doing things like Ahman did. Instead of jQuery you can use any html and/or library you find.

When you want to control values from your html file/folder you can do it like this.
https://community.articulate.com/discussions/articulate-storyline/2-way-communication-between-content-in-an-iframe-and-storyline
Basically you set a custom variable and get/set that in the WebObject/iFrame.

Hi Math! Was wondering if you could make a quick short screen recording of the whole process. 

Have you finished working on the tutorials

Cool