How These Were Made

Mar 16, 2023


I'm curious how Aman Vohra made these two examples:

Can anyone explain:
1) How the fish animation was created in the first example, and what slide size did he choose to make the screen appear so wide in the browser (PC). How should I set the slide size to create something like this?

2) Are the animations files - lotties, gifs or something else? 

3) In the second Typography example, how was the slide size set-up? 

6 Replies
Math Notermans

Its a WebObject with Canvas on it. If you check it in the console you end up here... 
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...

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.
A function createGoldfishes( ) creates them and each instance has specific settings in code.
GOLDFISH.prototype = {
OFFSET : 30,

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

Kind regards,

Daniel Cortez

Thanks for the detailed explanation, Math! This looks amazing:

Where do you find stuff like this👆 I'm still a beginner with Javascript, HTML & CSS, but would love to explore more. BTW, is it possible to find details like the Canvas width, font name, font size etc... from the "Source" section in Chrome's Developer tools. Can you share any tutorial which wil help me learn all these basics? 

Math Notermans

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.