Skip to content

Instantly share code, notes, and snippets.

@nerkat
Last active November 25, 2022 09:52
Show Gist options
  • Save nerkat/ce6a81d1365001df314244e5545e02c2 to your computer and use it in GitHub Desktop.
Save nerkat/ce6a81d1365001df314244e5545e02c2 to your computer and use it in GitHub Desktop.
Shopify - add scroll animation to all sections
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.animate([
{
transform: 'translateY(30px)',
opacity: 0,
filter: 'blur(10px)'
},
{ transform: 'translateY(0px)',
opacity: 1,
filter: 'blur(0px)'
}
], {
duration: 1000,
iterations: 1,
easing: 'ease-in-out',
direction: 'normal'
});
}
});
});
document.querySelectorAll('.shopify-section').forEach((section) => {
observer.observe(section);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment