5 Tricks For Epic Hero Animations (Framer Tutorial)

In this Framer Tutorial we talk about 5 powerful tricks that will help you create next-level hero animations.
🔴 Working File: timgabe.com/re...
Timecodes
0:00 - Introduction and Overview
0:36 - Importance of Hero Sections
1:12 - Setting Up in Framer
1:48 - Brief Overview of Five Tricks
2:24 - First Trick Introduction
3:00 - Importing Image to Photoshop
3:36 - Select and Mask Tool
4:12 - Content Aware Remove Tool
4:48 - Generative Fill Tool
5:24 - Exporting Layers
6:00 - Placing Character in Framer
6:36 - Second Trick Introduction
7:12 - Zooming Techniques
7:48 - Applying Zoom to Background
8:24 - Third Trick Introduction
9:00 - Adding Sparkles Effect
9:36 - Particle Component Tweaks
10:12 - Fourth Trick Introduction
10:48 - Adding Bold Text
11:24 - Text Sizing and Positioning
12:00 - Fifth Trick Introduction

[@RobertsOzolins]

Probably the best Framer content on CZcams. Keep up the good work. 🙌

[@TimGabe]

thank you so much, robert!!

[@MarkLewis-tw5nt]

Yeah. Been bingeing for a while now

[@leviwanyoike]

Awesome tut Tim. I am still in awe at how easy Framer is, especially when compared to Webflow. This will definitely onboard more designers onto web.

[@TimGabe]

right?! i love framer!

[@houze.9490]

I really like your videos TIm, they are short very clear and easy to pick up. I try to come up with a different version of the tutorial each time I try. Not easy to beat you tbh :) Framer is so much fun to learn, and it really puts no limits on your imagination, absolutely love it. Great content by the way! Appreciate the effort you put in.

[@TimGabe]

that's so nice of you, houze! thank you man!!

[@eric58macdonald]

Excellent, thank you👍

[@TimGabe]

thanks a lot for the comment, Eric!!

[@topperboi1642]

Damn man you really made me switch from webflow to framer now😬👏👏

[@TimGabe]

haha, that's awesome to hear 🤩

[@drakZes]

Great work. Nice parallax animation for Figma.

[@austinmoras7800]

wow Tim, another banger!💥

[@TimGabe]

really appreciate that, Austin!!

[@user-anum702]

thank you for this great content 🤩

[@TimGabe]

thank you for commenting and supporting!!

[@prashlovessamosa]

Thanks man.

[@TimGabe]

appreciate the comment, my friend!

[@MACH_SDQ]

Good as always !!!!

[@TimGabe]

thanks a lot my friend 🙏

[@Jessy_noctaupus]

Hello Nice tutorial. But It could be nice to shares all the assets to be abble to follow the tutorial. Would be so great

[@u_walk2251]

TORUK MAKTO - rider of last shadow. bring us na'vi victory in this great sorrow

[@TimGabe]

haha!! go na'vis!!

[@vision3690]

Thx bro

[@sbthebrand66]

Always great stuff. Question though. What do you recommend to those who do have photoshop but not the version you have?

[@TimGabe]

you can also use something like canva, but ps is the best for this i think!
search for "background removal in photoshop" and check around for the options that suit you

[@sidhuk3128]

How can i do the same in reactjs with code. any resources

[@nickwoodward819]

2: your developer hates you xD

[@TimGabe]

hahaha! the good thing is that it's framer, so you don't need a developer in this case!!

[@nickwoodward819]

@@TimGabe 😁

[@user-hc1lt1wp2l]

Explain things better. As a newbie following a long. You don't explain everything wnough and it's confusing

[@TimGabe]

appreciate the feedback! 🙏

[@SustainerNYC]

A big Q arose for me early on in the tutorial. At 3:07 as you're dragging your initial bg image into the Viewport, it appears to auto-position as Relative. When I replicate the same thing in my layered Hero, my only active Position options are Absolute or Fixed. Where am I going wrong? Thanks!