Demystifying animations π©β¨ 3D button for loomSDK public beta
View Comments and ReplyTranscript
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.