Resource Documentation
Core (Essential for Functionality)
Add the following script before the closing body tag.
No items found.
Customization (Optional Enhancements)
No items found.
Use This Solution Multiple Times on a Page
Step 2 – Copy one of the following CSS codes
This component comes with two animation options, you can use the one you prefer. You can adjust the easing and duration directly from Webflow’s Style panel.
%%spacer-3rem%%
2.1 - Option 1 (Slide)
%%spacer-2rem%%
Paste the following code inside a code embed
<style>
.social-icon_arrow {
transform: translateX(-220%) scale(0);
transition: transform 0.3s ease;
}
.social-icon_link:is(:hover, :focus-visible) .social-icon_svg {
transform: translateX(220%) scale(0);
}
.social-icon_link:is(:hover, :focus-visible) .social-icon_arrow {
transform: translateX(0%) scale(1);
opacity: 1;
}
</style>
%%spacer-3rem%%
2.2 - Option 2 (Scale)
%%spacer-2rem%%
Paste the following code inside a code embed
<style>
.social-icon_arrow {
transform: scale(0);
}
.social-icon_link:is(:hover, :focus-visible) .social-icon_svg {
transform: scale(0);
}
.social-icon_link:is(:hover, :focus-visible) .social-icon_arrow {
transform: scale(1);
opacity: 1;
}
</style>