Installation
Add Socks UI to your project, a UI library powered by GSAP.
Made mainly for Webflow, but can be used in any project.
Add the scripts
Add the following scripts to the end of the BODY tag of your page:
1. Add GSAP first!
Most animations in Socks UI use GSAP. It should be added above any Socks UI scripts
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>2. ⚠️ Experimental: Auto-loader
This script scans your site and automatically loads the components you need!
Due to loading external scripts, there is a chance this could get blocked by your browser or ad-blocker. We are still testing to see if this is safe to use in production
<script src="https://cdn.jsdelivr.net/npm/socks-ui@{v}/dist/socks.js"></script>
OR
2. Manual Installation
Each component has its own script on its page. You can copy it by clicking the code snippet. For example:
<script src="https://cdn.jsdelivr.net/npm/socks-ui@{v}/dist/accordion.js"></script>Add attributes
Follow the instructions of each page to learn which attributes have to be used for your use case and what options you have. All Socks UI attributes are prefixed with s- to avoid conflicts.
If an element isn't working, open your dev tools (cmd/Ctrl + I) and check for error messages in the console.