Streaming live at 10am (PST)

"Slot machine/Rotating" Words Effect


#1

Not sure what this effect is called but you'll find it here: http://doamaral.com/#/index

When you click to go to the next section below, the title "rotates" onto the next title, similar to a slot machine. Is this possible on WebFlow?

Thanks!
Alex


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


#2

This should be possible with custom code, as it doesn't require any back-end stuff.


#3

Hi @aOne,

I inspected the source code of the webpage and discovered that each slide is a link block with a background image and text overlay (see attached screenshot).

Use an interaction scrolling trigger to achieve what you need https://interactions.webflow.com

Hope this helps.

All the best,
Naweed


#4

@nwdsha How can I achieve the word effect alone with interactions?

The way I tried it is by putting a text box with multiple words on different lines inside of a div with the height set to show only one word with overflow hidden. Then a load interaction on the text box to move the text box up to reveal the next line of text while hiding the first line through hidden overflow. While this worked pretty well, it wont move the text box up correctly. It would move it up a bit too much or too little even when I set the px exactly the right amount.

Any ideas?

Thanks!
Alex


#5

@aOne

No, you cannot do the exact effect with the current interactions. You can of course, hire a JavaScript developer who knows how to create vertically scrolling sliders and sync multiple sliders.

@nwdsha

If you notice carefully, there are three separate sliders: projects-frame, titles, and years. I hope you can show me a working demo of how to do this without custom code because I am interested to know as well.


#6

@samlies I didn't say it can be achieved without custom code :wink:

@aOne Samuel knows more about this than I do, he used a cool trick with a synced slider http://webflow-tricks.webflow.io/how-to-sync-webflow-sliders

Maybe you could use this same trick but with the 2nd slider overlayed on the existing slider....? Is this possible, Samuel? @samliew


#7

Of course, the slider needs to be vertical scrolling. Webflow's slider can only scroll horizontally, so we have to implement a third-party one or code it ourselves.


#8

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