Text Moves Right

Text Moves Left

Text Moves Right

Text Moves Left

In the left sidebar from the Site Tab, click SITE SETTINGS to open up the panel. From the popup, select Integrations. This is where you will see we've built in global settings site wide (this means you can use it on any page). Under the nested Integrations, select Site Customizations.

If you are adding to an existing website, you will need to add the custom code in order for your effects to work. To do this, go to SITE SETTINGS. Click the Integrations tab and select + Add Custom Code. In the center panel, select + ADD CODE TO... and from the dropdown, select Add HTML to the head and paste:

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script>
window.addEventListener('load', function () {
gsap.registerPlugin(ScrollTrigger);

gsap.registerPlugin(ScrollTrigger);

const allslideLeft = document.querySelectorAll('.slide-left') //change this if you want it to target a different class

allslideLeft.forEach((slideLeft) => {
gsap.from(slideLeft, {
xPercent: 30, //change the number if you want it to move further away or closer
ease: 'power1.out',
scrollTrigger: {
trigger: slideLeft, //this is what triggers the animation
start: 'top 85%', //this is how far from the trigger the element has to be. Similar to our scroll actions
end: 'top 10%', //this is where it ends
scrub: true, //change to false if you don't want it to change gradually as the user scrolls
markers: false // turn this off when done debugging
}
})
})

const allslideRight = document.querySelectorAll('.slide-right') //change this if you want it to target a different class

allslideRight.forEach((slideRight) => {
gsap.from(slideRight, {
xPercent: -30, //change the number if you want it to move further away or closer
ease: 'power1.out',
scrollTrigger: {
trigger: slideRight, //this is what triggers the animation
start: 'top 85%', //this is how far from the trigger the element has to be. Similar to our scroll actions
end: 'top 10%', //this is where it ends
scrub: true, //change to false if you don't want it to change gradually as the user scrolls
markers: false // turn this off when done debugging
}
})
})

ScrollTrigger.refresh();
});
</script>

Paste Into Pre-Existing Site

You can use custom classes:

.slide-left
.slide-right

Preview instructions on Desktop :)