Animation
Floating 3D Ticket in Framer
Created by
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
Animation
Created by
To create this floating 3D ticket, I start by drawing a ticket shape in Figma and exported it as SVG, then applied it to a frame in Framer as a mask. I then wrapped the ticket frame and applied 3D transforms with preserve 3D, perspective, and rotation. Text layers were elevated by adding depth to their wrapping frame.
To create this floating 3D ticket, I start by drawing a ticket shape in Figma and exported it as SVG, then applied it to a frame in Framer as a mask. I then wrapped the ticket frame and applied 3D transforms with preserve 3D, perspective, and rotation. Text layers were elevated by adding depth to their wrapping frame.
To create this floating 3D ticket, I start by drawing a ticket shape in Figma and exported it as SVG, then applied it to a frame in Framer as a mask. I then wrapped the ticket frame and applied 3D transforms with preserve 3D, perspective, and rotation. Text layers were elevated by adding depth to their wrapping frame.
For animation, I used a mirrored loop effect, giving it a nice back-and-forth floating motion. If you want to learn about 3D transform properties, make sure to check out this 30-minute crash course.
For animation, I used a mirrored loop effect, giving it a nice back-and-forth floating motion. If you want to learn about 3D transform properties, make sure to check out this 30-minute crash course.
For animation, I used a mirrored loop effect, giving it a nice back-and-forth floating motion. If you want to learn about 3D transform properties, make sure to check out this 30-minute crash course.
The loop effect in Framer.
The loop effect in Framer.
The loop effect in Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.