Jump to content

Add vertical carousel animation to a portion of text in a phrase

Recommended Posts

Site URL: https://www.getwatercooler.com/

Hi - I'm interested in adding a vertical auto-carousel "animation" to the text in the hero image on this site:  https://www.getwatercooler.com/

Practically speaking, I would like the word "insights" in the phrase "insights at work" to be replaced by additional words that scroll up from the bottom automatically and pause for 1-2 seconds before the next word in the carousel appears. In this case, the "at work" text would remain frozen in place and not animate, just the first word being replaced automatically. Additional words might be something like "equity" to make the phrase "equity at work" or "empathy" to make the phrase "empathy at work". I've seen a lot of advice for animating the entirety of a text box, but not portions of that text box as in this example.

Thanks for sharing your expertise!

hero text carousel mockup.png

Link to comment
  • Replies 4
  • Views 2.4k
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 year later...
23 hours ago, ArminB said:

Hi @tuanphan do you know/have a script for this vertical text animation:

https://www.liveatlinden.ca/

that would be awesome
(the text within the top banner)

Thank you!

Hi,

I checked their code >> to see what class name they used >> then google this class

Quote

sp-words-wrapper

and I found, this effect from https://plugin.squarestud.io/guide/typing-animated-text-yu1

image.thumb.png.e950f6b37254824e0c5a940efbf57afc.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.