Framer tutorial: Animated Border in 2 minutes (No-code)

preview_player
Показать описание


Chapters:
0:00 Preview
0:10 Creating first framer - BorderCard
0:27 Creating frames inside BorderCard
0:45 Creating gradient
1:08 Adding the animation
2:00 Final

In this video, I’ll guide you through the process of creating a animated border gradient using Framer with no code. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your projects.

What you'll learn in this tutorial:
- Creating an animated border gradient in fast and easy way!

Don't forget to like the video if you find it helpful and subscribe to our channel for more Framer tutorials and design inspiration. If you have any questions or suggestions, please leave them in the comments section below. Let's dive into the world of interactive design with Framer!
  1. Toni Järvinen - Design Tutorials
  2. Framer
  3. Tutorial
  4. no-code
  5. animation
  6. framer tutorial
Рекомендации по теме
Framer tutorial: Animated 0:02:15

Framer tutorial: Animated Border in 2 minutes (No-code)

Framer Tutorial: Creating 0:05:11

Framer Tutorial: Creating Gradient Borders

Framer Tutorial - 0:09:58

Framer Tutorial - Create Animated Gradient Borders | 3 Different Animation Styles!

Animated Gradient Borders 0:06:04

Animated Gradient Borders in Framer

Learn CSS Border 0:05:57

Learn CSS Border Animations in 6 Minutes

Animated Border While 0:08:14

Animated Border While Hovering - Figma Prototype Tutorial

Learn Figma: Animated 0:05:36

Learn Figma: Animated Border in Figma for Beginners

Animated or Live 0:03:11

Animated or Live Overlays Frame/Border On Green Screen | Video Frame, Border | Part-1 | Green Screen

How to Create 0:11:45

How to Create Viral 3D Clothing Animations in After Effects (Step-by-Step!)

Framer Tutorial : 0:24:50

Framer Tutorial : Create MindBlowing Scroll Animation Without Coding

css border animations 0:06:04

css border animations with framer motion in 7 minutes

Springy Animated Modals 0:11:03

Springy Animated Modals // Framer Motion & React Tutorial for Beginners

Neon Border loop 0:03:01

Neon Border loop with Saber - After Effects Tutorial - (Free Plugin)

OBS Animated Border 0:05:23

OBS Animated Border AS A FILTER

Fire Frame Animated 0:00:11

Fire Frame Animated Border - 100% Free Stock Footage

#Shorts Border Line 0:00:39

#Shorts Border Line Animated Frame Green screen video No copyright Kinemaster Chroma key

Animated Boarder frame 0:01:14

Animated Boarder frame green screen animation effects HD video | chroma key border animation frame

Neon Light Border 0:00:42

Neon Light Border | Glowing Frame | Hd Background Loop | Animated | Green Screen | VFX |Black Screen

Frame | Neon 0:00:19

Frame | Neon Frame Border Free copyright (1) | Green Screen

Video Border in 0:00:26

Video Border in VN Video Editor #shorts

White FULL SCREEN 0:00:31

White FULL SCREEN Template | Neon Border | Glow Light Overly | Vertical Frame | Multi Lines #shorts

Awesome CSS Border 0:04:15

Awesome CSS Border Animation | Quick CSS Animation Effects @OnlineTutorialsYT

2 Types of 0:06:47

2 Types of Border Animations on HOVER! | Quick CSS - Animated Border Cards

Border Animation CSS 0:04:26

Border Animation CSS | Quick Animation

Комментарии
Автор

Holy cow, you made this so easily! You're a Framer genius!

See_thru_it_all
Автор

I DONT KNOW WHAT I WANT TO SEE NEXT BUT I WANNA SEE IT!!!

alexinaustralia
Автор

Loved the tutorial! How can I make this component responsive though? The moment I add layout properties the design breaks :(

aartibandekar
Автор

is there a way of making it responsive? i´ve been trying but i havent been lucky, thanks for the content!! i have learned lots from u

fantazero
Автор

what if I wanna make this gradient thing corresponding to page scroll? kinda like serving as a reminder of how long this article is. Thanks!

JordanMattKim
Автор

Hey, I love the simplicity of this. But I'm struggling to make the component responsive. You are only using fixed width and height. Which is not that useful unfortunately (For this example, probably yeah, but not in general).

How would you make it responsive?
Somehow when I set width to fit content it goes to 0 px even though the layers under have width.

JoeShowCheek
Автор

how to make it stop speeding up around corners?

d
Автор

bro how you duplicated it whithout mouse, At the end of my project, when I add a gradient, it gives the entire screen color, it doesn't appear so much at the edges

CARDOLEO
Автор

it says "Page Not Found" when pressing the link.

mtmp