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.