Floating 3D Ticket in Framer

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

New

New

New

Animation

Floating 3D Ticket in Framer

This is a floating 3D ticket recreated in Framer from Suno’s website. Feel free to remix the project to see how something like this is built in Framer. I used 3D transforms and loop effect animation to bring this ticket alive!

image of Nandi Muzsik
image of Prianca S.

Created by

3D-rendered early access ticket with gradient blue design
3D-rendered early access ticket with gradient blue design
3D-rendered early access ticket with gradient blue design

About the resource

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.

About the resource

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.

About the resource

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.

Loop Effect settings showcasing options like type (Loop/Mirror), delay, opacity, scale, rotation (2D/3D), skew, offset, and transition style

The loop effect in Framer.

Loop Effect settings showcasing options like type (Loop/Mirror), delay, opacity, scale, rotation (2D/3D), skew, offset, and transition style

The loop effect in Framer.

Loop Effect settings showcasing options like type (Loop/Mirror), delay, opacity, scale, rotation (2D/3D), skew, offset, and transition style

The loop effect in Framer.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

    Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

    Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

  • 3D stacked images showcasing realism and motion effects

    3D Stacked Scroll Animation in Framer

    Animation

    3D stacked images showcasing realism and motion effects

    3D Stacked Scroll Animation in Framer

    Animation

    3D stacked images showcasing realism and motion effects

    3D Stacked Scroll Animation in Framer

    Animation