(In the tutorial, I titled my 3D composition Image Window Comp.) You can do this with 3D layers or images, or you can use 3D plugins made for After Effects, such as Element 3D or Stardust. Then, in another composition, you’ll need to build out your 3D or 2.5D scene. Making the card layers 3D and adding text descriptions on the card. Feel free to add in any custom text or descriptions onto your card, as well. Make sure all of the layers of your card are 3D layers in After Effects. Creating the card design using Solid layers and masks. You’ll also need to create a layer that’s going to act as your “ Image Window” for the 3D portion of your card. ![]() The image on the card can be anything you want, from flat layers to pictures or 3D models.įirst, you’ll need to create your card shape using Solid or Shape layers. You can make 3D versions of real cards you scan yourself, or you can create an original one from scratch. ![]() This is possible through a bit of compositing trickery (track mattes to be specific-more on that later). What makes 3D cards look so unique is that we can see the card is flat, yet the image on the card has depth, far exceeding that of the card. DOWNLOAD THE FREE AFTER EFFECTS 3D CARD PROJECT FILESīy downloading, you agree not to resell or redistribute these free assets. ShapeĬlip-path: inset(10% 20% 30% 40% round 25%) Ĭlip-path: polygon(50% 25%, 75% 75%, 25% 75%) Īnimating clip-path can be as simple as changing the property values from one shape to another using CSS transitions, triggered either by changing classes in JavaScript or an interactive change in state, like :hover. I’ll let the CSS-Tricks almanac go into deeper detail, but here are examples of those first four shapes. Taking advantage of the fact that this relationship between positive and negative space can be animated provides for interesting transition effects… which is what we’re getting into in just a bit.Ĭlip-path comes with four shapes out of the box, plus the ability to use a URL to provide a source to some other SVG element. ![]() Once the circle is defined, the area inside it can be considered “positive” and the area outside it “negative.” The positive space is rendered while the negative space is removed. Parts that are inside the region are shown, while those outside are hidden.Ĭonsider the circle shape provided by clip-path. The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Just for a quick explanation as to what the clip-path is and what it provides, MDN describes it like this: ![]() I hope you’ll see just how awesome the property and it’s shape-shifting powers can be.īut first, let’s do a quick recap of what we’re working with. We’re going to dive right into clip-path in this article, specifically looking at how we can use it to create pretty complex animations. It’s a little intimidating in the sense that it feels like math class because it requires working with geometric shapes, each with different values that draw certain shapes in certain ways. Clip-path is one of those CSS properties we generally know is there but might not reach for often for whatever reason.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |