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

  • Feel more human everyday" headline with a "Request demo" button, displayed above a row of rotating image tiles featuring modern objects like a keyboard, car, and vinyl player

    Circular Website Intro Scroll Animation in Framer

    Animation

    Feel more human everyday" headline with a "Request demo" button, displayed above a row of rotating image tiles featuring modern objects like a keyboard, car, and vinyl player

    Circular Website Intro Scroll Animation in Framer

    Animation

    Feel more human everyday" headline with a "Request demo" button, displayed above a row of rotating image tiles featuring modern objects like a keyboard, car, and vinyl player

    Circular Website Intro Scroll Animation in Framer

    Animation