Vertical Animated Text

Vertical Animated Text is a visual design element used to display a short sequence of words or phrases in a vertical stack with animation. It adds creative energy and visual interest to campaign pages by rotating or transitioning text with motion. This component is non-essential, decorative, and should only be used in specific marketing contexts where emotional or stylistic expression is appropriate.

Recommendations

  • Keep text concise: Use impactful, 2–4 word statements for maximum clarity.
  • Limit to one instance per page: Overuse dilutes impact and may distract users.
  • Ensure accessibility:
  • Use semantic HTML for screen readers.
  • Avoid fast, jerky, or looping animations.
  • Use brand-approved color and typography styles to maintain design system harmony.

When Not to Use

  • On internal tools, forms, or non-campaign microsites.
  • In mobile-heavy layouts where vertical text may be unreadable or collapse poorly.
  • When conveying detailed, instructional, or mandatory content (e.g., how-to guides, legal notices)
 

Approved Usage Context

  • Approved Usage Context
  • Only permitted on marketing campaign pages approved by the Digital Experience or Brand team.
  • Designers and developers must include a fallback/static version for accessibility and mobile optimization.

 

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files

Functional grouping: Marketing and storytelling

Demo

This is
Sliding text
Sliding text
Sliding text
Sliding text

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	






                
            

        

    
    
    






    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    
    




    
    


Do Use When:


    

  • You are building a marketing campaign landing page that aims to capture attention quickly (e.g., event promotion, city-wide initiative, call-to-action microsites).

  • The vertical text is used to reinforce a short, action-oriented message (e.g., Explore. Engage. Empower.).

  • The animation is subtle, smooth, and accessible, without distracting from core content.

  • The message is complemented by strong visuals and used as a design accent, not a content crutch.




    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    
    




    
    


Don't Use When:


    

  • On core City of Calgary content pages, including service pages, information portals, or forms.

  • For displaying critical information or navigation, especially if vertical text could reduce legibility or accessibility.

  • In contexts where animation may reduce performance on low-powered devices or create confusion.

  • If the message exceeds 3–4 short words, making it difficult to read vertically.