<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.0011 16.091C14.2604 16.091 16.092 14.2594 16.092 12.0001C16.092 9.74074 14.2604 7.90918 12.0011 7.90918C9.74172 7.90918 7.91016 9.74074 7.91016 12.0001C7.91016 14.2594 9.74172 16.091 12.0011 16.091Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.637 12H12.2734" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17 3H7C4.79086 3 3 4.79086 3 7V17C3 19.2091 4.79086 21 7 21H17C19.2091 21 21 19.2091 21 17V7C21 4.79086 19.2091 3 17 3Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 11.2721V8.94C20 8.40957 19.7893 7.90086 19.4142 7.52579C19.0391 7.15071 18.5304 6.94 18 6.94H12.5291C12.3661 6.94 12.2055 6.90014 12.0614 6.82389C11.9173 6.74764 11.7941 6.63732 11.7024 6.50253L10.2974 4.43747C10.2056 4.30267 10.0824 4.19235 9.93826 4.1161C9.79415 4.03985 9.63358 3.99999 9.47054 4H5C4.46957 4 3.96086 4.21071 3.58579 4.58579C3.21071 4.96086 3 5.46957 3 6V18.3353C3 18.5539 3.04306 18.7704 3.12671 18.9724C3.21037 19.1743 3.33299 19.3579 3.48757 19.5124C3.64215 19.667 3.82566 19.7896 4.02762 19.8733C4.22959 19.9569 4.44605 20 4.66466 20M4.66466 20C5.04341 20 5.41083 19.8708 5.70627 19.6338C6.00171 19.3968 6.2075 19.0662 6.28966 18.6965L7.652 12.5661C7.75071 12.1219 7.99795 11.7247 8.35291 11.4399C8.70786 11.1552 9.14929 11 9.60434 11H18.9992C19.2987 11 19.5944 11.0673 19.8644 11.1968C20.1344 11.3264 20.3719 11.5149 20.5593 11.7485C20.7467 11.9822 20.8792 12.2549 20.9471 12.5466C21.015 12.8383 21.0165 13.1415 20.9516 13.4339L19.8405 18.4339C19.7417 18.8781 19.4945 19.2753 19.1395 19.5601C18.7846 19.8448 18.3431 20 17.8881 20H4.66466Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.25 5.25L7.25 11.25C7.25 12.355 8.145 13.25 9.25 13.25L19.25 13.25" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.75 10.75L19.25 13.25L16.75 15.75" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 19.9999C9.953 18.1469 6.86 17.8199 4.444 19.0189C3.779 19.3479 3 18.8989 3 18.1569V6.84393C3 6.23693 3.275 5.65493 3.756 5.28493C6.245 3.36793 9.753 3.59593 12 5.96893C14.247 3.59593 17.755 3.36793 20.244 5.28593C20.725 5.65593 21 6.23793 21 6.84393V18.1559C21 18.8979 20.221 19.3479 19.556 19.0179C17.14 17.8199 14.047 18.1469 12 19.9999Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 19.9997V5.96973" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.4761 16.0528L17.0508 13.9414V10.058L20.4761 7.94658C20.6276 7.85319 20.8012 7.80192 20.9792 7.79808C21.1571 7.79424 21.3329 7.83795 21.4883 7.92471C21.6437 8.01147 21.7731 8.13813 21.8632 8.29162C21.9533 8.44511 22.0008 8.61988 22.0008 8.79786V15.2016C22.0008 15.3795 21.9533 15.5543 21.8632 15.7078C21.7731 15.8613 21.6437 15.9879 21.4883 16.0747C21.3329 16.1615 21.1571 16.2052 20.9792 16.2013C20.8012 16.1975 20.6276 16.1462 20.4761 16.0528Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.7816 5.5H6.21839C4.44092 5.5 3 6.95507 3 8.75V15.25C3 17.0449 4.44092 18.5 6.21839 18.5H13.7816C15.5591 18.5 17 17.0449 17 15.25V8.75C17 6.95507 15.5591 5.5 13.7816 5.5Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 7.64733V18.1175C6 18.2792 6.04311 18.4377 6.12461 18.5758C6.20612 18.7139 6.3229 18.8263 6.46222 18.9008C6.60154 18.9752 6.75804 19.0089 6.91467 18.998C7.07128 18.9872 7.22199 18.9323 7.35038 18.8393L12 14.4128L16.6497 18.8393C16.778 18.9323 16.9287 18.9872 17.0853 18.998C17.2419 19.0089 17.3985 18.9752 17.5377 18.9008C17.6771 18.8263 17.7939 18.7139 17.8754 18.5758C17.9569 18.4377 18 18.2792 18 18.1175V7.64733C18 6.94521 17.7291 6.27186 17.2468 5.77539C16.7646 5.27891 16.1105 5 15.4286 5H8.57143C7.88944 5 7.23539 5.27891 6.75315 5.77539C6.27092 6.27186 6 6.94521 6 7.64733Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/> </svg>

Notification

Need help?

Unfortunately, we don’t currently have the capacity to answer all questions individually, but that’s why we created the Osmo community!

It’s a space where members can come together to share tips, troubleshoot, and collaborate. Whether you’re dealing with a tricky bug, need advice, or just want to connect with like-minded creatives, our community is here for you.

Join Slack Community

Join today

Join the Osmo Slack Community

Help, share, and inspire each other. This is the space to talk about animations all day long and connect with other Osmo members.

Join Slack Community

Join today

Unlock the
Osmo Vault

Upgrade to Osmo and unlock a growing library of animations, layouts, and creative techniques built to speed up your workflow.

Join today

Upgrade to
Lifetime

We’re offering an exclusive €50 discount code when you upgrade to a Lifetime membership. We’ll deduct the cost of your current cycle.

Lifetime Bonus
As a bonus you’ll also receive our complete marketing website, as a Webflow cloneable or a folder containing all HTML, CSS & JS assets.

Default

User image

Default

Name

  • -€50
    Upgrade to Lifetime
Unlock the Vault
Unlock the Vault

Scroll Animations

104
Horizontal Scrolling Sections

Horizontal Scrolling Sections

Sticky Features

Sticky Features

Stacking Cards Parallax

Stacking Cards Parallax

Elements Reveal on Scroll

Elements Reveal on Scroll

Follow SVG Path on Scroll

Follow SVG Path on Scroll

Locomotive Smooth Scroll Setup

Locomotive Smooth Scroll Setup

Global Parallax Setup

Global Parallax Setup

Highlight Text on Scroll

Highlight Text on Scroll

Masked Text Reveal (GSAP SplitText)

Masked Text Reveal (GSAP SplitText)

Sticky Title Scroll Effect

Sticky Title Scroll Effect

Scaling Element on Scroll (GSAP Flip)

Scaling Element on Scroll (GSAP Flip)

Skeleton Loader Text

Skeleton Loader Text

Scroll Progress Number

Scroll Progress Number

Scroll Progress Bar

Scroll Progress Bar

Parallax Image Layers

Parallax Image Layers