How to replicate rotaing word change in Webflow

Design help Animations & Interactions
1

I love this effect of half the title rotating and changing. I can get the rotating bit, but does anyone have any idea on how to make the text change?

@vincent I think you helped someone do this in January but the Gif is no longer viewable. Many Thanks

Here is the site https://www.orangecrushdigital.co.uk/

Here is my public share link: LINK
(how to access public share link)

2

Hi Guys - anyone have a clue how to do this? Many thanks

3

You could probably simply have diferent texts inside a div, then animate it to flip 180 and then fade out, as it fades out you animate the next one to fade in.

You create an interaction that flips it 180, but displays none half way through (when it is at 90 degrees and invisible since it doesnt have a thickness), and then display the next one in the same instant. I dont know how much you know about the software or webdevelopemt in general, so if you need a more indepth guide please tell.

If you look in their code it’s not changing the text, it’s displaying a secund text object.

<span class="rotate"><span class="rotating flip up" style="display: inline-block; transform: rotateX(-180deg);"><span class="front">beautiful websites</span><span class="back">strategic marketing</span></span></span>

There are probably some javascrips out there that does this for you.

4

thanks @Emil.Sjoberg - I know very little but I did see their code said animate. I kind of get what you mean, but any additional info that would help a pure novice would be much appreciated. Thank you.

5

I will try to make a more in depth guide hopefully this evening, I have some stuff to attend to right now. But I will make sure you can make it.

6

That is so brilliant - thank you so much @Emil.Sjoberg

7

Hi, I tried to create it, example here. But the way I though it would work doesnt work, because once the website loads, it doesn’t run the interaction in the same very instance, so as time passes they outsync each other. Atleast that’s what I think happens.

Here is the website if you want to see how I did this failed atempt: Link

So some smarter person has to write a script or google a better solution :smiley:

Maybe you could try and contact the person that created that website. I’m sure there is a solution out there if we just knew what to search for though…

1 Like
8

Thank you for trying - you did better than I @Emil.Sjoberg! Yes I might see if they could be some professional sharing!

9

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.