Making a basic After Effects animation for a website
VloĆŸit
- Äas pĆidĂĄn 28. 07. 2024
- With limited motion-graphics skills, I made an animation to demonstrate our app for the header of our marketing site! Here's a walkthrough of how I did it. (Open for more info)
đ CharliMarieTV is powered by Figma! charli.link/figma
Figma is a design tool that helps teams create, test, and ship better designs from start to finish. And it's free! :)
Please remember to click subscribe if you'd like to see more of my videos.
And if you want to try After Effects yourself, I'd really appreciate if you signed up for a trial using my affiliate link!
charli.link/aftereffects
It costs you nothing extra but I get a small commission for getting you interested in the software :)
--------------------------------
// WANT TO SUPPORT MY CHANNEL?
Become a âšchannel memberâš and get a cool icon next to your name in livestream chats, plus priority replies to your comments. Just click 'Join' (it's next to the subscribe button)
Or, if you like, you can put something in my tip jar right here: pages.charlimarie.com/product...
Sharing my videos or recommending my channel to a design friend is also very much appreciated! :)
--------------------------------
// ABOUT ME
I'm Charli and I'm designer from New Zealand currently living in Valencia, Spain. Iâm the Creative Director at a remote tech company called ConvertKit and I posting videos about the design projects I work on and the tools I use, as well as vlogs of my life as a designer. I regularly livestream what I'm working on in Coworking Club streams. Welcome to the channel! Please subscribe and say hi in the comments, and maybe we'll see you in the live chat on the next stream.
đŹ Twitter: / charliprangley
đ· Instagram: / charliprangley
--------------------------------
// MORE
Join my free weekly marketing design newsletter: charli.link/newsletter
Buy my hand written font, Grayscale: charlimarie.com/font
Book a mentoring session with me: charli.link/mentoring
My site & blog: charlimarie.com
Design Life podcast: designlife.fm
Inside Marketing Design podcast: insidemarketingdesign.co/
--------------------------------
// TECH & TOOLS
đč Get links to all the tech hardware I use to make my videos (and the art on my gallery wall!) right here: charlimarie.com/shopmyoffice
đ» Software I use:
Webflow (no-code website builder)*: charli.link/webflow
Premiere Pro (video editing)*: charli.link/premierepro
Adobe Audition (audio recording)*: charli.link/audition
After Effects (intro animation)*: charli.link/aftereffects
Figma (web design): charli.link/figma
Photoshop (thumbnails)*: charli.link/photoshop
ConvertKit (marketing platform): charli.link/try-convertkit
Riverside (podcast interview recording)*: charli.link/riverside
Music in this video from Epidemic Sound*: charli.link/epidemicsound
Video captions by Rev (very cost effective service! I recommend)*: charli.link/videocaptions
Intro & end card animation by Austin Saylor: www.austinsaylor.com/
Editing by Nancy Palm nancypalm.com & Belén Albiol / molen.audiovisual (or sometimes by me!)
Links marked with a * are affiliate links. I can't believe you read the whole description box! You get a âïž
I've been teaching myself after effects and bodymovin over the past few days, your video has come at such a great time! Thank you!!!
Thanks for this, I feel UI designers and web designers should really learn after effects even if we only use 10% of what it can do
Thank you so much Charli is a really nice video I use after effects and this actually inspired me so much!!
Very neat! Thanks for sharing I am also learning After Affects rn. Mostly do print and digital marketing work, but it's cool to do motion design for my personal brand as well as video intros for work, things like that.
Thanks for your time making this clear and friendly overview to share. Great to see all you did on screen. Am looking forward to trying out something similar in Adobe After Effects. BTW you seem pretty accomplished with the application despite your modest disclaimer at the beginning of the video. And loved the way you explained the design rationale. Have subscribed to your channel and look forward to learning more with you.
You are brilliant Charli!
Pretty helpful. Thanks!
Great job đđ I'm also thinking about learning motion design using Adobe aftereffects
i love it!
thank you for this very interesting video, but it would have helped me a lot to see to the end with the recovery of the animation and the integration in a web site.
Thanks for sharing. How long did this take to create?
would like to know how you did the animate to points
This is great Charli. I've seen the video before but didn't realise you made it. How long did it take you to do?
I've been playing with BodyMovin for a while in AE. What size did the video come out at?
This is great! You could also create and animate a mask inside of AE rather than needing to copy it from AI... in fact, you could create the final rectangular mask first, and then using keyframes and transform turn it into the blob (note that you shouldn't add more points than the first shape to avoid shaping issues), and then just reverse the animation which would make the blob turn into the rectangle... you'd have more control over it this way, and you could even do a third animation and turn the mask into something else if needed... your solution is great, too!
This girl is fire đ„
What format do you use when you hand it over to the developer?
What file format did you export as in after effects
After effects is my white whale really. Thank you so much for sharing your process...it really helped.
Have you used camera following the dot?
This is great
Thank you for this.
My pleasure!
any motion design online course you'd recommend?
which resoloution is for web design?
and what is the export format?
once your'e done with animation, at what format do you export the file to be used on web page
will it be good for responsive stuff?
Is there a way to export an animation out of after effects for the web and not have it loop?
Phoot phoot phoot!
How you integrated this in your website?
I work with and make animations in after effect, but not for websites. How does the rendering and imorting onto website work? What did you do here that you couldnât do with your usual program and coding? Thanks:)
Your videos are joyful to watch! You seem like a good partner in crime (as a designer, of course!)...
Hi Charli, What's the final size of the rendered video? Is there any fallback option for slow connections?
The final export is just 668kb, with a fallback of just a static image!
I think it would be better if you do the project from scratch. full screen
i mdhe 40 sec vid in after effftes i want to upload in website haome page plze help me in exporting
Can you share this template, please?
Yeah! Another Kiwi! ... and the topic I was looking for using the tools I have. Subscribed!
OMG! Just realized that you're Charlie from Design Life Podcast. I chatted with Femke earlier this year. Kia Ora!
Yep thatâs me!! đ€
What file type did you save it as for web?
it's an mp4
Your voice dude
Glad you enjoyed it!
Dude? lol
Is there another website you can use for free to use animation rather than after effects as I am struggling with money and canât afford to pay for Adobe software although I am highly experienced with these softwares
I'm not sure sorry :(
Itâs mainly known for 3D but it does 2D animation as well - Blender (blender.org)
How did u get the affiliate link?
By being an Adobe affiliate! :)
the thing is: how do you code it?
We embedded the mp4 on the site.
Hi Charli,
One question. How to export from AE to be inserted into a web page? I've exported stuff from Animate as HTML and used to insert it. But not sure on this one?
Thanks for the great content you provide.
It's inserted as an HTML video, with a static image fallback! :)
My head hurts.
If you need some stylish and unforgettable animation I'll help you with that
Mam you are beautiful âșïž