Join the Webstudio community

Updated 2 months ago

Creating a Text Rotator Animation in Webstudio

At a glance

A community member is working on a text rotator animation for their website and is looking for advice on integrating JavaScript with Webstudio, particularly regarding adding custom CSS or alternatives to embed styles. They are inspired by the clean transitions and animations on the Graphy website. Other community members provide suggestions, including a link to a CodeSandbox example and instructions on how to apply the CSS and JavaScript using an HTML embed. The community members work together to help the original poster implement the desired animation.

Useful resources
Hello Webstudio community!
I'm currently working on a text rotator animation for my website. I'd like to have a smooth transition where the text fades out and changes to a new message every few seconds. I’m looking for advice on integrating JavaScript with Webstudio, especially regarding adding custom CSS or alternatives to embed styles.
For reference, I’m inspired by the simplicity and elegance of the transitions on Graphy. The site effectively uses clean transitions and animations to make content dynamic and engaging, helping users communicate data clearly through visuals.
Any suggestions or examples would be incredibly helpful!
Attachment
Graphy-create-pro-level-graphs-that-drive-actions-.png
O
M
M
10 comments
html embed for adding these
I'm struggling to apply CSS and JavaScript. Could you please help me?
you have to add them in an html embed
Not very proud of the integration but it work like you need! Feel free to improve it
Go to the page "Slide Up Headline"
I truly appreciate your help; I now have a clear understanding of how it all works! I have applied it as well.
Add a reply
Sign up and join the conversation on Discord