Resources

Scroll Rotation Animation in Framer

View demo

Remix project

Remix project

Resources

Scroll Rotation Animation 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

Scroll Rotation Animation in Framer

This is a Framer rebuild of the scroll rotation animation originally seen on the Rainbow website. Feel free to remix the project, delve into it, and see how it's put together.

image of Nandi Muzsik

Created by

Nandi

Scroll Rotation Animation in Framer
Scroll Rotation Animation in Framer
Scroll Rotation Animation in Framer

About the resource

The effect is actually simpler than you might think. All we do is rotate the containers of the logos using a scroll transform. The 'from' state starts with opacity 1 and scale 1, and then the 'to' state introduces a neat little rotation. Yep, that's all there is to it.

About the resource

The effect is actually simpler than you might think. All we do is rotate the containers of the logos using a scroll transform. The 'from' state starts with opacity 1 and scale 1, and then the 'to' state introduces a neat little rotation. Yep, that's all there is to it.

About the resource

The effect is actually simpler than you might think. All we do is rotate the containers of the logos using a scroll transform. The 'from' state starts with opacity 1 and scale 1, and then the 'to' state introduces a neat little rotation. Yep, that's all there is to it.

scroll transforms in Framer

Scroll transform effect in Framer.

scroll transforms in Framer

Scroll transform effect in Framer.

scroll transforms in Framer

Scroll transform 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

  • Curved grid layout showcasing a variety of product images

    3D Curved Grid Scroll Animation in Framer

    Animation

    Curved grid layout showcasing a variety of product images

    3D Curved Grid Scroll Animation in Framer

    Animation

    Curved grid layout showcasing a variety of product images

    3D Curved Grid Scroll Animation in Framer

    Animation

  • Framer website homepage with navigation menu and pixelated project previews showcasing web design tool capabilities

    Animated Navigation Bar in Framer

    Animation

    Framer website homepage with navigation menu and pixelated project previews showcasing web design tool capabilities

    Animated Navigation Bar in Framer

    Animation

    Framer website homepage with navigation menu and pixelated project previews showcasing web design tool capabilities

    Animated Navigation Bar in Framer

    Animation