Streaming live at 10am (PST)

REQ: Text fader (like news ticker)


#1

Hey everyone!
I’m looking for a way to add a text ‘fader’ to my non-CMS site. I have some lines of text and I’d like one to fade in, then fade out, line 2 fades in, then fades out, line 3…etc

Is this possible and what element or code would I use to achieve this? It should have fade time parameter and needs to work on mobile platforms as well as desktop. My starting template is Metric.

Thankyou!
-Dax


#2

Have you tried Interactions?


#3

Hi samliew, thanks for your response.
I want this text to change on its own, not in response to a user interaction.
Is that possible with Interactions? (It’s not obvious from the title)

Also, it needs to transition between 3 or more states, not just 2.

Thanks,
Dax


#4

Yeah I don’t see why it can’t be.

There is an “On page load” trigger you can use to start a looping interaction


#5

Thanks so much, Sam!


#6

I’m now using the Slider, but that has so many problems with alignment/truncation it’s ridiculous! :frowning:


#7

If you have a question, please provide the required information

See Posting Guidelines for the Design Help Category


#8

Animation was definitely the right way to build this. Thanks again for your help, Samliew.


#9

You’re welcome. Do check out the rest of the tutorials in the help center.


#10

Turns out the animation doesn’t scale for smaller screens. :frowning:

I moved back to a slider, but the animation is still in the project (just hidden)
https://preview.webflow.com/preview/mixdirection?preview=95768c5d5b149da6a394aed0c03c916f