Spring Transition

Getting Started
System Requirements Installation & Update License Key Getting Started Settings
Topbar
Topbar Overview Font Library Keyboard Shortcuts Breakpoints  Canvas Control Page Audit Accessibility Comments  Versions
Pages Panel
Pages Pop-ups Custom Code
Utility Pages
User Registration Page  Social Login
Layers Panel
Layers
Symbols
Symbols
Elements Panel
Elements Overview Container Section Div   Flex Grid  Heading Paragraph List List Item Button Link Block Rich Text Image Video Lottie SVG Form Elements Lightbox Navbar Slider Tabs Map  Code  Collection Element Dropdown Pre-built Library Custom Properties
Form Builder
Form Elements Form Actions Form Data
Media Manager
Media Manager
Templates
Droip Templates
Style Panel
Style Panel Overview  Class Manager Typography Structure  Size Background Borders Shadow Effects Glass Effect Position Transform Transition Color Settings Values and Units Visibility Conditions Spring Transition
Interactions
Interactions Text Animations
Variables
Variables
AI Generator
AI Generator
Dynamic Data Basics
Collection Element Connect Elements To Dynamic Fields Creating Dynamic User Lists and Single User Templates  Filter WordPress Posts Using Collection
Content Manager
Overview  Collections Collection Fields Collection Items Displaying Dynamic Content Collection References Collection Search & Filter
Figma to Droip
Figma to Droip
Collaboration
Role Manager Real-Time Collaboration Comments  Versions
Role Manager
Role Manager
Tutorials
How to Translate a Droip Website With Weglot 
API Integrations
API Integrations 
Getting Started
System Requirements Installation & Update License Key Getting Started Settings
Topbar
Topbar Overview Font Library Keyboard Shortcuts Breakpoints  Canvas Control Page Audit Accessibility Comments  Versions
Pages Panel
Pages Pop-ups Custom Code
Utility Pages
User Registration Page  Social Login
Layers Panel
Layers
Symbols
Symbols
Elements Panel
Elements Overview Container Section Div   Flex Grid  Heading Paragraph List List Item Button Link Block Rich Text Image Video Lottie SVG Form Elements Lightbox Navbar Slider Tabs Map  Code  Collection Element Dropdown Pre-built Library Custom Properties
Form Builder
Form Elements Form Actions Form Data
Media Manager
Media Manager
Templates
Droip Templates
Style Panel
Style Panel Overview  Class Manager Typography Structure  Size Background Borders Shadow Effects Glass Effect Position Transform Transition Color Settings Values and Units Visibility Conditions Spring Transition
Interactions
Interactions Text Animations
Variables
Variables
AI Generator
AI Generator
Dynamic Data Basics
Collection Element Connect Elements To Dynamic Fields Creating Dynamic User Lists and Single User Templates  Filter WordPress Posts Using Collection
Content Manager
Overview  Collections Collection Fields Collection Items Displaying Dynamic Content Collection References Collection Search & Filter
Figma to Droip
Figma to Droip
Collaboration
Role Manager Real-Time Collaboration Comments  Versions
Role Manager
Role Manager
Tutorials
How to Translate a Droip Website With Weglot 
API Integrations
API Integrations 

Spring Transition

The Spring timing function in Droip adds life to your animations by simulating real-world physics. 

Instead of moving in a linear way, elements can bounce, overshoot, and settle naturally. This makes interactions feel more responsive and human.

When applying a spring transition, you only need to adjust two properties: