Hello everyone!
Do you guys know how to trigger a spline scene when scrolling into view?
I want the Spline-made animation to start when the scene scrolls into view and not when the page loads because the scene sits on the bottom of the page and it’s not a looping animation.
(it’s the blue ball that salutes you)
Basically when the reader reaches the scene element the animation has already played out.
Cheers!
-Seppo-
Hey Seppo! Ever figure this out? I’m currently facing the same issue and trying to figure out a solution myself.
document.addEventListener(“DOMContentLoaded”, function() {
// Select the Spline container element
const splineElement = document.getElementById(‘spline-container’);
// Create an Intersection Observer
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
// If the element is in view, start the animation
window.splineAPI.play(); // Make sure to have loaded your Spline object correctly and replace ‘splineAPI’ with your actual Spline object reference
} else {
// Optional: reset or pause the animation if it leaves the view
window.splineAPI.pause(); // Or you might use stop() or seek(0) to reset
}
});
}, {
rootMargin: ‘0px’,
threshold: 0.5 // Adjust this value based on when you want the animation to trigger
});
// Observe the Spline element
observer.observe(splineElement);
});
JavaScript example for the solution. Hope this helps