Animated Lottie Logo on Squarespace

I’ve done some updates at this site and created a new logoanimation.

But it took some time to find the right solution, so here’s a short guide on how to set it up.

Add the logoanimation

First we need to add the JSON-file to the site. This is just a placeholder so we have it visible some where. A perfect spot is in the footer, since that is rendered on every page.

So Edit the footer at the bottom of the site and add a </>Code block.

In my case I added this:

<dotlottie-player src="https://lottie.host/f1d113e1-399e-4a5c-a0af-1158553f0418/qXgNIAYkgD.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></dotlottie-player>

And if you want it to link back to your index page (first page), add this before and after the lottie.

<a href="/"></a>

Like this:

<a href="/"><dotlottie-player src="https://lottie.host/f1d113e1-399e-4a5c-a0af-1158553f0418/qXgNIAYkgD.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></dotlottie-player></a>

Add the engine

Next we'll find Website Tools. Go into Website, Pages and scroll down and find Website Tools.

Here you are going to add the Java Script driver so the site understands how a JSON-file from Lottie should be played.

Scroll down to the Footer and add this script code.

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

So this is adding the engine to your site. Every Lottie JSON file will now be played like it was a native solution.

Move it to the header

Then we need to change the position of the </>Code block to the menu.

In the code below, the div#... is the code-block div number and unique name for that div block. This will have a totally different name on your site and will change if you for instance add a new code-block. Use Inspector/Inspect in your browser of choice to pick that name.

The div#... will then switched placement with the .site-title. The Class name, the .site-title, can be different on your site, so change it accordingly. So the code is:

<script>

  $(document).ready(function() { 

		$('div#block-yui_3_17_2_1_1705391194356_4861').appendTo('.site-title');

	});

</script>

Hide the old logo

Then we need to hide the old logo. If you use text only as a logo use .site-title or something similar. If it's an image use .site-title img, and display none will hide the old logo.

<style>

  .site-title img{

    display: none;

}

</style>

That’s it. Hope it works for you too, and comment here if there’s any questions.

Soon hitting 800 000 monster plays

This is so fun! In just two weeks we are soon hitting 800 000 plays. Thats’ the most views I’ve had on a video ever. Lot’s of positive comments, lot’s of shares, and seems to be living it’s own life. I don’t have a overview of all the different places the video is uploaded so this is just a ballpark estimate.

Hope it passes a million!

Now we are talking about viral value :)

Do you feed the plastic monster?

My latest video for Norwegian Maritime Authority and Marfo! I'm the guy behind developing the monster, animation and vfx it into the shots. If everything goes as planned I will create some short tutorials based on the work from this video. I came across a lot of interesting techniques and also ways do simplify some of the processes, like picking a camera from other videos to animating te monster.

Showreel 2023

It’s about time I updated my showreel; a collection of work I’ve created and been involved with over the years. You can read more about the work and my role.

This video started with the music, a collaboration with the great Atella guys, where they created stems (different parts musical parts and drums) and I did the composition, some additional sounds, mix and master. Inspiration at that time was Blade Runner, both new and old, and a couple of other tracks that I liked the feel too.

For all the camera-movements I’ve tracked live action stock videos that almost contain the images I wanted. Drone shots, hand held movement and underwater camera. I did a rough cut to the music and started to create the scenes.

I’m going to write a project breakdown later with more info and short clips.

Links to whole projects:

Ard arealplan - Tollet
Atella - Closer to life
Hi Tech Mobility
Sjøfartsdirektoratet
Aclima
Ardarealplan.no
Maritim Forsøpling/Kystverket
Subshine
Kunzt.no
Wonderboy
Vi Aquavit
Oslow
Coca-Cola
Marcus Monne (personal work)
Myreze - Una World
Stacc

Stacc Brand Video

Stacc is a Norwegian fintech company with more than 30 years of experience delivering digital solutions and consulting services to banks, asset finance providers, insurance companies, pension funds, family offices and the public sector in the Nordics.

Stacc combines financial technology with design and strategic know-how. We're fast, we understand, we help you do the right things the right way. We enable financial services to innovate, surprise and excite.

I’m really happy how the project came along, and happy to make a second video for the guys :)

Producer: Jørgen Håland, JHåland
Photography (people moving): Jørgen Håland
Stock: Artgrid
Motion Graphics: Jørgen Håland, Julian Forthun
VFX and Color Grade: Jørgen Håland
Edit: Jørgen Håland
Voice: OnlineVoices
Music: MusicVine

Sjøfartdirektoratet: Zero Emission - Directors Cut

New work published to my site!

This is a story about creating the first hydrogen ship in Norway. In the directors cut there are some small changes just to tighten the story.

Making my site come alive with GifGun

I’ve updated my site with small GIF animations.

Yes good old GIFs, the easiest way to create a moving images, when it’s not clean graphics. I’ve done a lot of web-animation that are SVG based and way more flexible and economic in “physical” size, but sometimes it’s only GIF that delivers.

And in this case I wanted to show some logos in context.

So how to make simple and quick GIF without pulling all your hears out?

A GIF are usually horrible to work with, in Photoshop, but with the simple plug-in for After Effects called GifGun it’s possible to fine tune and create a GIF that looks good and don’t end up as a 60 MB behemoth.

All the examples are from 500 KB to 2 MB.

A last trick is to only have a small part of the image that moves, so the freezed parts are only rendered ones.

So say hello to some simple and great updates to web-animation page :)

Stacc show reel 2020

I helped Stacc creating a show reel. They work in Banking, and other systems and are basicly only screen based. I came up with a concept to work with called; all the screens. Screens can be really static and I had to make that interesting and different. This ended up with many different devices floating around in a red Stacc void showing some of their solutions. Visit Stacc here: https://stacc.com/

I helped Stacc creating a show reel. They work in Banking, and other systems and are basicly only screen based. I came up with a concept to work with called; all the screens. Screens can be really static and I had to make that interesting and different.

This ended up with many different devices floating around in a red Stacc void showing some of their solutions.

Visit Stacc here: stacc.com/

See their FB post here: