Resources

Floating 3D Ticket in Framer

View demo

Remix project

Remix project

Resources

Floating 3D Ticket in Framer

View demo

Remix project

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

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

Nandi

and

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.

Join waitlist

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.

Join waitlist

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.

Join waitlist

Nandi portrait's background
Nandi's portrait

More resources

More resources

View all

  • COSMOS logo with spiral vortex animation of images

    Spiral Vortex Animation in Framer

    Animation

    COSMOS logo with spiral vortex animation of images

    Spiral Vortex Animation in Framer

    Animation

    COSMOS logo with spiral vortex animation of images

    Spiral Vortex Animation in Framer

    Animation