Demystifying animations 🎩✨ 3D button for loomSDK public beta
3 mins
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
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.
More than 25 million people across 400,000 companies choose Loom
For Mac, Windows, iOS, and Android
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 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 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 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 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 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 QuickCEO, Postclick