University
Log in
Search
⌘E
My learning
Try Webflow — it's free
Learn
Courses
Learning Paths
Videos
Docs
Resources
Certifications
Webflow University Pro
Interactive Learning
Glossary
The Webflow Way
Engage
Support
Community
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
Glossary
Scroll-driven animations

Scroll-driven animations

Scroll-driven animations are CSS animations whose progress follows scrolling instead of time. Scrolling down plays the animation forward, and scrolling back up rewinds it.

You link an animation to the scroll position of a container with scroll-timeline and scroll(), or to an element's visibility in the viewport with view-timeline and view(), then assign it with animation-timeline. A reading progress bar and a card that fades in as it enters view are common examples. They are written in CSS with no JavaScript, and they work in Chrome, Safari, and Firefox 159. If you want to know how far visitors actually scroll, look at scroll depth instead.

Relevant courses

No items found.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Webclip

→
A 256 x 256 px image associated with your website that shows up when your website link is saved to an iPhone home screen.

Tag

→
A Hypertext Markup Language (HTML) tag is a code snippet that defines and describes the structure and content of web pages.

Display: block

→
Display properties tell browsers how an element should behave on the page. The most common display property keyword category is display: block.

Flex-shrink

→
The flex-shrink CSS property defines how much an element shrinks relative to other flexible items inside the same parent element.

Page settings

→
You can manage your site pages within Page settings. Here, you can rename, duplicate, delete, or save pages as drafts. You can also set SEO, Open Graph, and site search settings, as well as insert custom code. Additionally, you can set RSS settings for Collection pages.

Literal

→
In JavaScript, literals are fixed values written directly into the code.

Agentic translation

→
Agentic translation is when AI agents translate site content into other languages automatically, either as a one-time pass a person reviews or as continuous translation that keeps a locale in sync with the primary one.

Webflow badge

→
A visible "Made in Webflow" badge displayed in the bottom right corner of Webflow sites on Starter plans.

Parameter

→
A parameter is a programming variable or value that transfers data between functions.

Dashboard

→
From your Dashboard, you can access, create, and manage all your sites.

Width

→
Width defines how wide an element can be. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

Element breadcrumbs

→
A navigational aid that displays in the bottom of the Webflow Designer to help you keep track of the element you're interacting with in relation to its hierarchy.

Flex-align

→
A flexbox property that lets you customize the alignment behavior of flex children, based on the cross-axis of the flex container. The cross axis is the opposite of the flex-direction property, so if you set the direction to vertical, the cross axis is horizontal. Options include start, center, end, baseline, and stretch.

Button

→
A button is an interactive element that facilitates user actions.

Argument

→
An argument is an independent value a function receives to deliver a specific output.

Heading

→
A heading is a text element that provides a title or headline for a section of content on a webpage. These elements guide users and search engines through your content.

Valid

→
A valid CSS pseudo-class is a keyword that enables styling HTML elements based on their state or position in the document structure or web page.

Footer code

→
Footer code creates a section at the bottom of every web page that displays important information like disclaimers, copyright or contact information, and links to related documents.

CMS Collection page

→
A dynamic page that Webflow automatically creates for each Collection item. When you design a Collection page, all the pages that are created for each Collection item will have the same template but different content.

Cipher suite

→
A cipher suite is a collection of encryption algorithms that work together to secure a network connection.

JPEG XL

→
JPEG XL is a royalty-free image format that produces smaller files than JPEG at similar quality and supports transparency, animation, and HDR.

DHTML

→
DHTML, or Dynamic HTML, is a web-development technique combining HTML, CSS, and JavaScript to create dynamic, interactive web pages and complex web applications.

Webflow CMS

→
Webflow's content management system (CMS) is where dynamic content (Collections and their Collection items) is stored and maintained so you can reference it throughout your site. A CMS lets you input data in one location, then use Collection template pages or Collection lists to display that content without having to update the content displays one at a time.

Domain name forwarding

→
Domain name forwarding is a process that automatically redirects visitors from your domain name to a different web address.

Closed-loop marketing

→
Closed-loop marketing is an ecommerce marketing strategy that uses customer data to create and improve targeted content.

Mobile (landscape) breakpoint

→
A Webflow canvas setting that lets you create styles for viewports with a minimum width of 480px and a maximum width of 767px. Also known as the mobile landscape media query.

Element edges

→
The color-coded borders of elements you'll see in the Webflow Designer.

Basic section

→
A section of the Add panel that contains the elements that act as a website's fundamental building blocks (e.g., div block, list, button, etc.).

Link field

→
A link field is a form input field that enables you to add links to your designs dynamically. You can connect a link field to text links, buttons, or other link elements to turn them into active links.

Percent

→
A measurement unit relative to an element's parent.

Color field

→
A color field specifies a graphical color picker or user interface for entering a color into a text field in a seven-character, hexadecimal format.

Python

→
Python is a high-level, object-oriented, general-purpose programming language (GPL).

Collection

→
A content type (blog posts, recipes, etc.) represented by a group of fields you define. Once created, you can add individual Collection items.

Adobe Fonts API token

→
An Adobe Fonts API token protects and supports your data from Adobe Fonts with other programs you may be using to personalize your website’s fonts.

Structured Query Language (SQL)

→
Structured Query Language (SQL) is a programming language that enables storing, retrieving, and manipulating information in a relational database.

Registrar

→
A registrar, or domain name server (DNS) registrar, manages the sale of domain names and the assignment of IP addresses, ensuring each domain’s uniqueness.

Collection item

→
An individual item within a Collection. For example, in a “Blog Posts” Collection, the Collection items are individual blog posts.

Hotlink

→
A hotlink — also known as a remote or inline link — is a hyperlink that directs to a resource, such as an image or a file, without the owner’s explicit permission.

Made in Webflow

→
Made in Webflow showcases Webflow sites made by individuals and teams.

Scroll depth

→
Scroll depth is the percentage of a page a visitor scrolls through before leaving, which shows how much of your content actually gets seen.

Bottom margin

→
The spacing between the bottom border of an element and the element(s) below it.

Display: inline-block

→
The display: inline-block CSS property defines an element’s appearance and behavior. CSS designers use this code to create website layouts.

Top padding

→
The inside spacing between the top border of an element and the elements inside it.

Profile settings

→
The area where you can manage your profile, email settings, and security settings.

.htaccess

→
.htaccess is a powerful configuration file that allows you to configure and control how your website functions.

Bottom padding

→
Bottom padding is the space between the bottom of an element and its border.

Background

→
A website background is a visual element behind webpage content, enhancing aesthetic appeal and user engagement.

List item

→
A list is a Webflow element that displays multiple pieces of content in a structured, visually appealing way. The individual elements that make up the list are called list items.

Collection field

→
An individual field within a Collection. You'll select which fields to display in dynamic Collection lists and Collection pages.

Homepage

→
The page people see when they visit your site's root domain. Read more about the homepage.

Width: auto

→
The way browsers calculate an element's width automatically where Block level elements fill the available space of its parent and Inline elements shrink to the size of its children/content.

ATAG

→
Authoring Tool Accessibility Guidelines (ATAG) are a layered rule-set that influence how designers and developers create a more accessible internet.

Borders

→
The CSS border property delineates an HTML element.

Target

→
The currently selected element.

ID selectors

→
You can assign element IDs from the Element settings panel in the Designer. ID selectors are useful for HTML anchors, linking to page sections, or for custom code.

Document object model (DOM)

→
The document object model is a platform- and language-neutral interface that lets programs and scripts dynamically access and update the content, structure, and style of documents.

Zapier

→
A web app that helps you connect multiple third-party services together based on triggers and actions.

CSS Filters

→
CSS filters apply visual effects to HTML elements and their children using Cascading Style Sheets (CSS).

Style panel

→
The first tab in the right-side panel that allows you to assign classes to elements and style them.

Site plan

→
A Webflow plan that you can add/apply to individual sites. You’ll receive access to different site and hosting features based on your Site plan.

Selector state

→
A pseudo-class that allows you to change the styles of an element when it is hovered, pressed, or focused.

Primitive

→
A primitive is the simplest JavaScript data type, representing fundamental values that do not encapsulate any object, method, or property.

SVG (Scalable Vector Graphics)

→
Scalable Vector Graphics, or SVG, is a file format for displaying scalable vector graphics on the web.

Pages panel

→
A panel in the left toolbar where you can add static pages and folders to your Webflow site. You can also manage and access Utility pages and Collection pages.

Formality

→
Formality is a localization setting that controls how formal or casual a translation sounds in a given target language.

Compile time

→
Compile time is the length of time it takes for a compiler to convert high-level code into low-level code.

Base tag

→
The base tag specifies the base URL for all relative links within HTML code for a specific page or document.

Inheritance dropdown

→
A dropdown menu that displays all the selectors that affect a given element.

Paginate items

→
This checkbox allows you to enable or disable pagination on the selected Collection list.

Localization

→
Localization (l10n) involves adapting digital content and applications to meet a specific region or culture’s language and conventions.

Parent folder

→
A parent folder is a directory containing one or more folders and files.

Props

→
Props are the customizable settings exposed on a reusable component, letting you change its content, styling, or behavior each place it's used without editing the component itself.

Rich text element

→
Allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually.

Pixel

→
A pixel (px) is the smallest unit of measure in a digital image or display, representing a single point of color or light.

Username

→
The ID used to log into your Webflow account.

Element settings panel

→
The second panel on the right side of the Designer. Here, you can change element-specific settings such as the element ID, Custom attributes, Search index settings, Editor settings, etc. You can learn more about the element settings for a specific element by searching for the element’s name on Webflow University.

RGB (Red-Green-Blue)

→
RGB, an acronym for Red, Green, Blue, is a color model that screen displays use to represent various colors.

Navigator

→
A navigator, or a navigator window or panel, is a graphical user interface (GUI) that provides an overview of a website's structure and layout.

Position section

→
A section in the Style panel that houses CSS properties related to the positioning of an element.

Canvas

→
The <canvas> tag in HTML5 creates a container for dynamic graphics and image rendering on a webpage.

Comparison shopping engine

→
A comparison shopping engine (CSE) is a search engine that compares ecommerce pricing, shipping costs, and customer reviews.

Deep copy

→
In programming, a deep copy is a replica of an object that doesn’t share the same references as the original. That way, if you make changes to the duplicate, the original stays the same.

Minified code

→
Minified code refers to the process of removing unnecessary characters and whitespace from the source code file without affecting its functionality.

Modal window

→
A modal window (or modal) is a web element that displays above all content and restricts user interaction until it’s manually dismissed.

Collection list

→
A Collection list is a Webflow element that lets you dynamically display content from a CMS Collection.

Height: auto

→
The "height: auto" CSS property automatically adjusts an element’s height based on its content.

Sidebar

→
A sidebar, typically positioned on the left or right side of a website or app, is a vertical component that contains supplemental information to enrich a webpage’s primary content.

Return on investment (ROI)

→
Return on investment (ROI) is a metric evaluating the profitability or gain of a venture.

Gutters

→
Gutters refer to the whitespace between content columns on a webpage.

Link block

→
A link block operates much like a div block, an HTML element for grouping and organizing other HTML elements (like text, images, and forms) into block-level containers. But in the case of a link block, what’s inside the block becomes a link.

Component Module

→
A section in the Add Panel that houses pre-built Webflow elements such as sliders, tabs, and lightboxes.

Padding

→
Padding is a CSS property defining the space between an element's borders and its content.

Website name

→
A website name, or domain, is the title of a website that appears in the browser tab and search engine results.

Checkout process

→
The checkout process in ecommerce is the process that online customers go through to complete a purchase.

SSL CDN

→
SSL CDN, or Secure Sockets Layer Content Delivery Network, is an option that allows you to serve your images over your own CDN service while using SSL.

Empty state

→
The state displayed when a Collection contains no Collection items, which gives you the opportunity to design for a situation where there's no content to display. Check out the Empty States blog for inspiration.

Child

→
A child element is an element nested within a parent element in a hierarchy.

Jank

→
Jank describes subpar functionality in a web interface that hinders or disrupts user activity.

Right padding

→
The inside spacing between the right border of an element and the elements inside it.

Paragraph

→
A typography element used for displaying multi-sentence text content.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more