<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="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="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>

+

Enter

Resources

Multi Filter Setup (Multi Match)
Filters & Sorting
Open
Multi Filter Setup (Multi Match)
Filters & Sorting
Open

Sitemap

The Vault
Open
The Vault / Saved
Open

We couldn't found a match for "Lorem ipsum"

Notification

Default

Default

Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

-€50
Upgrade to Lifetime

Subscription very long for test the test test
X days

Light modeDark mode

Unlock the Vault

Page Transition Course

Closing Thoughts

Closing Thoughts

Closing Thoughts

Closing Thoughts

00:00

/

00:00

1x1.2x1.5x2x0.8x

Closing Thoughts

Closing Thoughts

That's a wrap! We'll recap everything you've learned, and cover the quick checklist for going live.

Lesson Notes

Links

Minify your JS

Going live

Set debug: false in your Barba config
Minify your JavaScript
Connect the production file to your website

What you've learned

What Barba is and the problem it solves
The lifecycle: hooks, transitions, sync mode
The Osmo boilerplate: function registry, transition functions, utilities
Building transitions: overlays, wipes, dynamic content, timing control
Custom routes and GSAP Flip for advanced patterns

Community

Join the dedicated Page Transition Course channel in the Osmo Slack to connect with others taking this course. Share your work, ask questions, and request topics for future videos!

Bonus content

Chapter 6 contains dedicated videos for specific problems and techniques. This chapter will grow over time, if there's something you want covered, let us know in Slack!

Questions?

If you have a question about this lesson or the course in general, join us on Slack and drop it in the #questions channel.

Join Slack Community

Search

K

Locked

Locked

Lesson 5.3

Mark Complete

Completed