3D Logo Animation Website in Framer

3D Logo Animation Website 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

Animation

3D Logo Animation Website in Framer

This is a cool 3D logo scroll animation of Framer University logo. I used Endless Tools to create the 3D version of the logo exported it as an MP4, and added it to my scroll media component to make it play on scroll.

image of Nandi Muzsik
image of Prianca S.

Created by

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

About the resource

To create this 3D logo in the Endless Tools, I started by uploading the logo as an SVG using the shape tool. By pressing 'R' and dragging, I rotated the shape into position. Then, I applied a material of choice and fine-tuned details like light direction, depth, roughness, and environment power all in the Endless Tools. After finalizing, I exported the shape as a looping video in MP4 format.

About the resource

To create this 3D logo in the Endless Tools, I started by uploading the logo as an SVG using the shape tool. By pressing 'R' and dragging, I rotated the shape into position. Then, I applied a material of choice and fine-tuned details like light direction, depth, roughness, and environment power all in the Endless Tools. After finalizing, I exported the shape as a looping video in MP4 format.

About the resource

To create this 3D logo in the Endless Tools, I started by uploading the logo as an SVG using the shape tool. By pressing 'R' and dragging, I rotated the shape into position. Then, I applied a material of choice and fine-tuned details like light direction, depth, roughness, and environment power all in the Endless Tools. After finalizing, I exported the shape as a looping video in MP4 format.

3D concrete logo with texture customization panels showing stone materials and appearance settings on a dark background

The material and editing options in Endless Tools.

3D concrete logo with texture customization panels showing stone materials and appearance settings on a dark background

The material and editing options in Endless Tools.

3D concrete logo with texture customization panels showing stone materials and appearance settings on a dark background

The material and editing options in Endless Tools.

In Framer, I added this video to the scroll media component, so the 3D logo smoothly rotates as you scroll through the site.

In Framer, I added this video to the scroll media component, so the 3D logo smoothly rotates as you scroll through the site.

In Framer, I added this video to the scroll media component, so the 3D logo smoothly rotates as you scroll through the site.

Scroll media settings panel displaying video mode, length, FPS, and media fit options on a dark interface

The scroll media component properties in Framer.

Scroll media settings panel displaying video mode, length, FPS, and media fit options on a dark interface

The scroll media component properties in Framer.

Scroll media settings panel displaying video mode, length, FPS, and media fit options on a dark interface

The scroll media component properties 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

  • Dynamic card carousel featuring collectibles, fashion, and automotive themes with vibrant visuals

    Expanding Cards Scroll Animation in Framer

    Animation

    Dynamic card carousel featuring collectibles, fashion, and automotive themes with vibrant visuals

    Expanding Cards Scroll Animation in Framer

    Animation

    Dynamic card carousel featuring collectibles, fashion, and automotive themes with vibrant visuals

    Expanding Cards Scroll Animation in Framer

    Animation

  • 3D spiral layout of various design mockups featuring branding and UI/UX projects on a dark background

    Spiral 3D Scroll Animation

    Animation

    3D spiral layout of various design mockups featuring branding and UI/UX projects on a dark background

    Spiral 3D Scroll Animation

    Animation

    3D spiral layout of various design mockups featuring branding and UI/UX projects on a dark background

    Spiral 3D Scroll Animation

    Animation