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.

Color - Animated shorts sizzling with knowledge

I came across this series with highly effective animated shorts about color. Every transition is a joy to see and the content magnificent.

And read about the subject over at CNN

Take a look at learn a lot!

Colorscope is a series on CNN that explores our perception of color and its use across cultures, one shade at a time. Inspired by our love for The Purple One we chose the last color on the spectrum, a marriage of opposites, a mixture between the hottest color and the coldest. http://www.cnn.com/2017/08/04/health/colorscope-purple/index.html For full credits visit buck.tv

We love CNN's Colorscope series, and were very excited to be asked to contribute. Here is everything you ever wanted to know about pink, but were afraid to ask. See the other colours here: www.cnn.com/colorscope ----- CREDITS Client: CNN Creative Producer: Sarah-Grace Mankarious Directed by Giant Ant Creative Direction: Jay Grandin Producer: Liam Hogan Storyboard: Conor Whelan, Jay Grandin, Marion Bordeyne, Eric Pautz Art Direction: Eric Pautz Illustration & Visual Development: Eric Pautz, Marion Bordeyne, Conor Whelan, Shawn Hight, Sitji Chou, Whitney Lam Animation Direction: Conor Whelan Animation: Conor Whelan, Shawn Hight, Chris Anderson, Henrique Barone, Matt James, Taylor Peters, Whitney Lam Compositing: Conor Whelan, Eric Pautz Sound Design: Bryan Stone

Short history of the colour black made for CNN as part of their Colorscope series. Direction, Design and Animation by Matt Abbiss Produced by Sarah-Grace Mankarious Animation by Marta Reis Andrade Sound Design by Bryan Stone Music by Giacomo Smith 2017

YELLOW is part of the Colorscope series by CNN. "They call it mellow yellow". The short documentaries about different colours shows us on this episode how the colour yellow makes us happy, is on the most visibles hues and it's relation with science and religion. Created by Sebastián Baptista Producer: Sarah-Grace Mankarious Writer and Narrator: Dr. James Fox Music: Giacomo Smith Sound Design: Bryan Stone Special thanks to: Andy, Pini & Javi

The Dark Truth Behind White Working with CNN I directed and animated an episode of Colorscope, a series exploring the secret truths behind colour. Client - CNN Production - Sarah-Grace Mankarious Direction / Animation - Jocie Juritz Writing / Narration - Dr James Fox http://edition.cnn.com/specials/arts/colorscope-series http://www.jociejuritz.co.uk/CNN-white

"Green, the mixture of blue and yellow, can be seen everywhere and in countless shades. In fact, the human eye sees green better than any color in the spectrum. But why is that?" I teamed up (once again) with the amazing Rafael Mayani for this short piece commissioned by CNN International to explain the so-familiar colour, green. Producer: Sarah-Grace Mankarious Written and Narrated by Dr. James Fox Animation: Jorge R. Canedo E. Design: Rafael Mayani Music: Giacomo Smith Sound Design: Bryan Stone

"Blue is the world's favourite colour" We worked with CNN and Dr. James Fox to produce a film for their Colour Scope series. See the website here: http://edition.cnn.com/interactive/2016/12/specials/colorscope-blue/ Produced by Sarah-Grace Mankarious & Moth Direction & Design by Moth Animation by Moth, Joe Bichard, Jennifer Zheng, Aaron Lampert, Carlos De Faria, Stephen McNally, Ester Rossi Sound Design by David Kamp Music by Giacomo Smith Client - CNN Production Year - 2016

The 8th episode of CNN Colorscope explores the allure of Gold; worshiped by pharoahs, Aztecs and millennials alike. See the series on cnn.com/colorscope Producer: Sarah-Grace Mankarious Writer and Narrator: Dr. James Fox Director and Animator: Tim Booth Music: Giacomo Smith Sound Design: Bryan Stone

Colorscope is an award-winning series exploring our perception of color and its use across cultures one shade at a time. Orange is the colour of sunsets, budget airlines, traffic cones and protestants, but it can also be toxic…! http://edition.cnn.com/2017/12/06/health/colorscope-orange/index.html Credits Writer and Narrator: Dr. James Fox Producer: Sarah-Grace Mankarious Production Company: Nexus Studios Director: Emmanuelle Walker Producer: Greet Kallikorm Production Assistant: Islay Leefe-Griffiths Executive Producer: Chris O’Reilly, Charlotte Bavasso Production Company: Nexus Studios Studio Lead: Elliott Kajdan Art Direction: Emmanuelle Walker Animators: Claudio Salas, Emanuele Romano, Pierre Rutz, Emmanuelle Walker Motion Graphics: Elliott Kajdan, Abel Kohen, Emmanuelle Walker Sound Design: John Black Music: Giacomo Smith

I worked with CNN on their second film for the Colour Scope series. The bar was set super high after the amazing job Moth Studio made on the first piece. Direction and Design by Abel Reverter Produced by Sarah-Grace Mankarious Animation by Abel Reverter Music by Giacomo Smith Sounds Design by Bryan Stone VO by Dr. James Fox Special thanks to the amazing Katie Menzies, Fabian Friedrich, David Elósegui and everyone that helped giving advice during the process at Pamplona 89. All the episodes at cnn.com/colorscope Client - CNN 2017

https://vimeo.com/channels/colorscope

Scrolling web-animation for DNF

I've been working with Neue on several projects this year and now a new part of my work has been released. It's logo web-animation to the site Den Norske Filmskolen (DNF).

This project I needed extra reinforcement because it needed java scripting, and my buddy Ola Marvin Leier were up to the task. I made the animation of the DNF logo and he did the scripting trickery to make the logo move and behave as we wanted it. When you scroll it activates the animated sequence, and to add some randomness if you reload or explore the site the animation have different states. And maybe the best part the size are tiny, for the animation around 18 KB.

This is a relative new way of creating flexible and tiny sized animations for the web using After Effects, bodymovin and java scripting.

See the logo animation in action here, and remember to explore the site:

Vibble app won a DogA design award

My connections to the Vibble app is many. I've done work directly with SoundIO that produce the app, making a logo introduction for the app using bodymovin for After Effects, and I've also made a presentation video for Neue that shows the brand identity.

So I sort of win a DogA award too :) !

I made this brand identity video presentation in collaboration with Neue for the Vibble App. The app is mixing made easy using streaming services combined with dj functions.

I created this short and sweet logo reveal for the Vibble app, an app that simplify DJing

Lottie - The new way of doing web and app animation

Sometimes you get to try a technique that changes the way you ser new possibilities.

This time it's Lottie. A converter tool created by Airbnb. Yes, that Airbnb.

You can create your animations in After Effects, and by keeping it to simple shapes, masks and keyframes for the animation (no effects supported).

It uses the Json creator tool called Bodymovin that are pluged into After Effects, and Lottie is on the other end handling the app part.

I used it on the Vibble app opening animation. A simple logo reveal for the easy DJing app.

The system have some huge limitations that I've came across . Like inverted mask. That's a no go.
In the logo reveal case I needed subtracting forms, but that didn't work, and I ended making tinytiny bridges that connects the different part, and create one single form. This isn't noticeable for the viewer, but adds an extra step to the process. If possible use layered shapes that are overlapping with it's own fill.

So it's early days, but it's new possibilities on the horizon. And the file sizes are tiiiiny. Like 9 kb for this animation. 

You can get the Vibble app in the iOS app store.

I created this short and sweet logo reveal for the Vibble app, an app that simplify DJing