How to Create a 3D Instagram Cube Transition in After Effects
Sep 23, 2020Are you looking to enhance your skills and impress those around you with your design abilities? It’s easier to create 3D cube transitions than most people think and it is a skill that will enhance your abilities overall. By learning how to create 3D cube transitions, you will learn so many other best practices and skills to do a smooth adobe after effects transition.
Learn with me how to create these simply elegant effects!
FREE LottieFiles Icon Animation Course For UX/UI & Product Designers
- Create a Professional Icon Animation and Play it on Your Phone (no experience necessary) Learn how to make an icon animation in Adobe After Effects
- Show-off your icon animation on your phone for your team, clients, or stakeholders
- Build a portfolio-quality showcase UI Animation
- Export your assets for hand-off to engineers
Table of Content
- 1. 3D Cube Transitions in After Effects
- 2. Steps on How to Create 3D Cube Transition in After Effects
- 3. Adobe After Effects Resources
- 4. UI Animation Double Certification
- 5. End Product of 3D Instagram Cube Transition
1. 3D Cube Transitions in After Effects
3D Cube transitions, most used on social media platforms like Instagram, are attractive and smooth animations that will take your look to the next level. While they look complex and difficult from the viewers perspective, they are actually quite simple to create in After Effects.
Understanding how to create an adobe after effects transition is a fundamental part of being a designer these days and I want to help you understand how much fun you can have while elevating your career.
I was messing around on my phone the other day and realized how simple the Instagram story 3D transitions are to create in After Effects.
I put together this quick tutorial to show you how it’s done which you will see below.
Most people don’t realize how insanely easy it is to create something visually quite stunning in After Effects. But, this animation cube, while not commonly used, will advance your aesthetics.
2. Steps on How to Create a 3D Instagram Cube Transition in After Effects
While 3D cube transitions aren't totally common, they are cool, and once you get the feel of how simple 3D works in After Effects, you'll be stoked. Not only will you be happier and impressed with yourself, you will be impressing all those around you, including your boss and/or stakeholders. This adobe after effects transition is one of my favorite transitions and will be yours too! You can download the source files and follow along here:
Click here to download the project assets and follow along.
Here are the steps:
- Import the design file
- Turn the layers 3D
- Move and rotate the right side of the 'cube'
- Create a null
- Move the null position in 3D space to the volumetric center of the 'cube'
- Parent the two layers to your null
- Drop a couple y axis keyframes on that sucka
- Ease those curves with the graph editor
- Drop a parallax light on, and enjoy!
Reach out to me if you have any questions or get confused along the way. I’d love to help you!
3. Adobe After Effects Transition Resources
FREE AFTER EFFECTS COURSE
FREE LottieFiles Icon Animation Course For UX/UI & Product Designers
Create a Professional Icon Animation and Play it on Your Phone (no experience necessary)
Learn how to make an icon animation in Adobe After Effects
Show-off your icon animation on your phone for your team, clients, or stakeholders and learn how 3D works in After Effects.
Build a portfolio-quality showcase UI Animation
Export your assets for hand-off to engineers
For additional resources and information, contact Issara for more information!
Click here to download the project assets and follow along.
4. End Product of 3D Instagram Cube Transition
Here is the video with handles and without handles
5. UI Animation Double Certification
I also offer a double certification in UI Animation where you will learn the best practices for working with a diverse range of assets and design tools including Figma, Sketch, Adobe XD, Illustrator, as well as delivering handoff of assets to engineering teams for implementation.
The UI Animation Certification Course provides groundbreaking and leading edge professional continuing education for UI/UX & Product Designers, and guarantees that the certificate holder demonstrates the skills required to reliably and consistently deliver high quality UI Animation for Digital Products and Websites using Adobe After Effects.
This continuing education course is for design professionals and students who want to:
- Learn how to consistently and reliably deliver high quality professional UI Animation in their Products using Adobe After Effects
- Increase their ability to deliver value, provide ownership, and deploy end-to-end visualization and high-fidelity prototyping of real-world UI Animation projects
- Advance their career, and learn a wide range of critical UI Animation techniques including working with Shape Layers, Motion Standards, Components, 3D, Augmented Reality, and more
- Stand out from the crowd, and increase the chance of meeting hiring manager needs through the development of a Product Design portfolio featuring UI Animation
Final Thoughts
Learn how to create a range of 3D UI transitions and gestures in After Effects. Learn how to precisely build 3D objects from your design files, animate, use lights. Learn how to parent and design visually arresting transitions and gestures.
Reach out to Issara and learn more about his FREE After Effects Course where you will learn all of the above and so much more.
Share your comments below, as a fellow designer, I’d love to hear from you.
Don't miss a beat!
New moves, motivation, and classes delivered to your inbox.
We hate SPAM. We will never sell your information, for any reason.
