Streaming live at 10am (PST)

How to create an interactive abstract background

Hello everyone,
I’ve been looking at the new Starbucks brand identity manual, it’s a website and it’s here:
https://creative.starbucks.com/

How it is possible to create an element like the green interactive circle in the homepage?
In general,how you insert abstract shapes that interact with mouse?

Thanks everyone!


Hi @Dario_Monet and welcome to your first posting on the Webflow forum. Let me first say welcome to this wonderful community.

This interaction was created for Starbucks using Javascript. However, just by using interactions, some ingenuity, and an understanding of 3D objects this can all be done in Webflow as well. You can reference this video for Mouseover interactions.

Enjoy!

1 Like

Thank you! I’m new on webflow and I’m looking how can I make crazy and experimental stuff for my wesite. This tutorial is very inspiring!

So you think to make it like starbucks the best way would be to create the code in javascript and embeds it, is it right?

@Dario_Monet, actually what I said is that they used custom JS to create that effect. You COULD create a similar effect within Webflow using the interactions mouseover.

There are numerous videos on Webflow’s YouTube Channel or even on PixelGeek. Search for both and you will find a lot of direction.

Gotta run

1 Like

What’s the green interactive blob got to do with starbucks? Aside from that and a few other things like the inability to download assets for use, colour specifications, fonts etc (which is a glaring error) it’s a pretty good brand guidelines reference for sub contractors working for the company but could have been far more useful as a digital version.