Skip toΒ content

Demystifying animations 🎩✨ 3D button for loomSDK public beta

3 mins

View Comments and Reply

Transcript

Show Transcript

Hi, this is Amanda and we are releasing our SDA for public beta. And I got to work on this, uh, landing pages here at animation.

Okay. So this is what it looks like. If you click the big button, then these beams light up and this there's like a, it's like a 3d type of button.

Okay. So I'm going to show you how it was built in case you're interested and you want to do more animation in the future.

Okay. So I wonder if this work was actually more in Photoshop than in code, um, but I'll show you. Okay.

So if we delete this, this is what is behind it. So when the button is raised up, it shows the bottom section.

So like that side, and when it's pressed down, you get to see like this portion of it. Okay. So I'm going to undo that.

And if you look closely, that's how this effect is done. It's like pretty much faked. And now You can kind of tell that there's like a little bit that's off right there.

Okay. And then for the Beatons, What is happening is these hero lights is a separate PNG. So, so how can I show you that?

So here, right? Um, this PNG or it's a JPEG is out wide. Um, oops. It looks like this and the one behind it looks like this.

Okay. So, so when this button has an active state, so when you are, when the mouse is pressed down on it, then there's a transition on this, uh, like the next sibling to bring its opacity to one instead of zero.

Right? So the overlay is just that they're perfectly on top of each other and the opacity changes there. Okay. That's all, this was really fun to build.

Transcript

More than 21 million people across 200,000 companies choose Loom

My teammates and I love using Loom! It has saved us hundreds of hours by creating informative video tutorials instead of long emails or 1-on-1 trainings with customers.
Erica Goodell

Erica GoodellCustomer Success, Pearson

Loom creates an ongoing visual and audible experience across our business and enables our employees to feel part of a unified culture and company.
Tyson Quick

Tyson QuickCEO, Postclick

My new daily email habit. Begin writing an email. Get to the second paragraph and think 'what a time suck.' Record a Loom instead. Feel like 😎.
Kieran Flanagan

Kieran FlanaganVP of Marketing, HubSpot

Loom amplifies my communication with the team like nothing else has. It's a communication tool that should be in every executive's toolbox.
David Okuinev

David OkuinevCo-CEO, Typeform

My teammates and I love using Loom! It has saved us hundreds of hours by creating informative video tutorials instead of long emails or 1-on-1 trainings with customers.
Erica Goodell

Erica GoodellCustomer Success, Pearson

Loom creates an ongoing visual and audible experience across our business and enables our employees to feel part of a unified culture and company.
Tyson Quick

Tyson QuickCEO, Postclick