Discover the best text-rotation websites created by professional designers. Get inspired and start planning your perfect text-rotation web design today!

Webflow

A 3d transforms interaction based on mouse position. 

Learn how to build this https://university.webflow.com/lesson/rotation-on-mouseover-interactions

Rotation on mouseover

Use multiple words to describe your concept 😃
Here is a handy component to cycle through a list of words!

Includes:
1) An Infinite loop version,
2) A finite version that only runs once.

Both versions are responsive and easy to customize.

Rotating Text

Infinite Text Rotation / Changer (Seamless Loop)

Based on https://monopo.vn/

Watch the tutorial at https://www.youtube.com/watch?v=yvqSioowCRc

Highlight Text

Highlight Text Tricks

Exploring some experimental circular SVG text effects for an intro animation. Inspired by Mary Lou in CodeDrop's Playground.

Three demos with hover-in, hover-out and click/tap interactions. Also, links to CodeDrop project and an Illustrator file I used to create the SVG text. Clone it today and feel free to use for all projects.

circular text effect

circular-svg-effect

Someone asked about this animation which you can view here: https://webflow.com/solutions/business-websites and I thought it would be awesome to rebuild this. It taught me a lot actually.

Feel free to clone it and dissect it. :)

Brand. Design. Site.

brand-design-site

Create a scroll-based animation to animate text based as you move down the page. Tutorial video on Webflow University: https://university.webflow.com/article/horizontal-movement-on-scroll

Horizontal transform 2.0

Horizontal scroll movement

An infinite rotating circle with text. There is a timed action when the page has finished loading. The simple action has two keyframes, the first has a rotation of 359 degrees, the second 0. Then its just a case of setting it to loop.

Feel free to clone, adapt and use :)

Infinite Text Rotation Around Circle

infinite-text-rotation-around-circle

A simple two-way horizontal text movement based on scroll. 

Feel free to clone, adapt and use :)

Two Way Horizontal Text Scroll

Two-way Horizontal Scroll

Staggered 3D text rotation animation based on https://khaby.iconmagazine.de/. Is setup to where it applies the animation to any instance of the container on the page, regardless of how many text elements are inside.

GSAP 3D Text Rotate

GSAP 3D Text Rotation Cloneable

Some Service Cards with a Rotation Hover interaction including a highlight effect. All based on the Webflow Tutorial example. Clone and play around with colors, also the rotation could be a bit improved...

Service Cards x Rotation on Hover

Clone: Service cards x rotation on hover

Rebuilt and animated the Amplify piece by @Guillaume Kurkdjian in Webflow with some rotation toggles.

House Animation

Amplify Factory 3D Animation

Welcome to Daily Interaction #114.

For this menu item animation we have 4 borders rotating in around the menu item text. This effect reminds me of sticks building something.

The effect was accomplished by placing 4 div blocks inside of a link block. The div blocks have a position of absolute with a specific width or height and are then placed on each side of the link block with the absolute position property. This creates a border around the link block. Then I changed the transform origin for each div block so that it could rotate a specific way. Then in interactions I applied an initial rotation, scale, and opacity to each div block. I had each div block rotate back to it's original position with a delay to each div block to create the effect of the border building around the link block. I used a speed of .25 for the animations, and an easing of 'sine out.'

Inspired by the Horatio menu here: https://tympanus.net/Development/LineMenuStyles/

WebDev for You - Daily Interaction #114

WebDev For You - Daily Interaction #114

A simple text mask. The text here is editable and the image is applied as a background to the text. 

In my example I have set the image to be fixed, as you scroll, the image itself remains fixed within the mask.

Feel free to clone, adapt and use :)

Text Mask

Text used as image mask

También

Snack N°10 : Hover Rotation

Rotation animation that transforms before and after item on scroll. Usefull for all before/after effects, can be used without rotation as well. Mousehover interaction also optional.

Rotation Animation

Rotation Animation Transformation on Scroll

Noah Shreve Portfolio

Noah Shreve — Portfolio

One Year. One Rotation.
Earth takes 366* days to orbit our Sun.
Sloooow dial takes one year to complete a rotation.

Change your relationship with time.
Take it Sloooow™