Play symbol when the user sees it on the screen, Help

Hello saola Fam, I have a script that serves to reproduce a symbol when it appears on the screen, I do not know how to make it work in Saola, the script is this:

// Select all elements with the class ‘observado’
var elementosObservados = document.querySelectorAll(‘.observado’);

// Intersection Observer configuration
var options = {
root: null, // The viewport
rootMargin: ‘0px’,
threshold: 0.1 // The percentage of the element visible to trigger the action
};

// Callback for the Intersection Observer
var callback = function(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Here you activate the animation or action of the symbol
var simbolo = entry.target;
// You can use the symbol ID to control it
var simboloId = simbolo.getAttribute(‘id’);
// Start the symbol timeline (adjust according to your needs)
tl.playSymbolTimeline(simboloId);
}
});
};

// Create an instance of the Intersection Observer
var observer = new IntersectionObserver(callback, options);

// Add each observed element to the observer
elementosObservados.forEach(elemento => {
observer.observe(elemento);
});

could you help me to make it work? i am not good at coding, could you give me a saola file with the code working? immensely appreciated.

Hi @lesliechow_lesliecho,

You just need to adjust the script slightly to switch between an HTML element and a Saola Animate element, and call the right symbol’s API to run the animation:

  • HTML to Saola: doc.findElementByDom(htmlElement)
  • Saola to HTML: saolaElement.dom

For more details, please refer to the attached sample. You can find the script in the scene activation event of the Function pane.
intersection-observer.saolapack (4.4 KB)

Regards,

thanks!!! works perfectly!! Thanks for the help! you are amazing!!

1 Like