wmosquini

Trying to follow your logic a bit, I made this line of code: jQuery(document).ready(function(){ const config = { root: null, rootMargin: '5px', threshold: 0 }; const top = document.querySelector('.uk-grid > div'); const observer = new IntersectionObserver(monitoraScroll, config); const vetorElementos = [].slice.call(top); for(var i=0; i < vetorElementos.lenght; i++){ const temp = vetorElementos[i]; temp.myAnimation = new TimelineMax({ paused: true }).staggerFromTo(i, .3, {autoAlpha: 0, y: 150},{autoAlpha: 1, y: 0}, .3); observer.observe(temp); } function monitoraScroll(top, observe) { for (var entry of top) { if (entry.isIntersecting) { entry.target.myAnimation.play(); } } } }); I have the same result as the demo code I posted (nothing happens). I don't know if it's correct.

Exactly, I just need to do the animation, as I can only perform it when displaying the element in the viewport, was using the code I posted above. I will try to make some changes similar to what you made, apparently it already helps me in this detail. Thanks a lot for the help.

This piece of code works perfectly, but executes all elements together. This is exactly why I am using Stagger to perform the animation individually. This is the problem line of code: vetorAnimacoes[contador] = new TimelineMax({paused:true}).staggerFromTo(target, .3, {opacity: 0, y: 150},{opacity: 1, y: 0}, .3); There are actually 6 elements. .uk-grid> div (all 6). Each has to perform the animation individually.

Follow the demo: https://codepen.io/wendell-mosquini-pozzatti/pen/eYOeGXP Note that .staggerFromTo does not work in for, whereas From works normally.

People, I am making code to control a list of elements, this is part of my code: for (let target of vetorElementos) { vetorAnimacoes[contador] = new TimelineMax({paused:true}).staggerFromTo(target, .3, {opacity: 0, y: 150},{opacity: 1, y: 0}, .3); // vetorAnimacoes[contador] = new TimelineMax({paused:true}).fromTo(target, 1, {scale:0, visibility: 'hidden', opacity: 0},{scale: 1, visibility: 'visible', opacity: 1}); observer.observe(target); contador++; } In the commented part of the code (line 3), this part works without any problem, but the code part (line 2) it does not execute at all. In staggerFromTo, if you replace the target directly with the querySelectorAll element, it will work, but not the result I need. This only happens in the stagger, either from, to or fromTo. Did I miss any details?

Look here: https://codepen.io/wendell-mosquini-pozzatti/pen/eYOeGXP Note that working with a grid, the question happens with title 4, which is on the right side. When loading the page, it does not appear along with the others, only when it reaches the bottom of the page. NOTE: If the embed does not display the titles, it runs directly on the site.

Hey @ZachSaucier, another question and maybe you can help me. There are certain times when the page ends up displaying two or more elements of the same class at a time in the viewport, but only one of them works (runs the animation), the others are invisible (without running), running only if I scroll the page, remove them from viewport and then back to viewport. As if it gave a conflict and only one could execute at a time. Do you know what may be happening and what I can change to run? Elements loading page with conflict: after scrolling the page and returning to the element:

It was something so simple and went unnoticed ... Worked perfectly. Thank you very much

I am creating a JS to run GSAP animations only when a particular element reaches the viewing area on the monitor. I'm using this post as a base: My HTML structure goes like this: <h2 class="teste">teste</h2> <h2 class="teste">teste</h2> <h3 class="teste">teste</h3> <h4 class="teste">teste</h4> The titles will be in various places on the page, and with the same class, I need each to perform independently, that is, each perform alone without interfering with the others. The base zip code works perfectly for viewport control, it plays the animation when the element arrives in the viewport, but all play together (all with the same class), not individually. JS: jQuery(document).ready(function(){ const options = { root: null, rootMargin: '0px', threshold: 1.0 }; const title = document.querySelectorAll('.teste'); const observer = new IntersectionObserver(onChange, options); const ar = [].slice.call(title); let animations = []; let count = 0; for (let target of ar) { animations[count] = new TimelineMax({paused:true}).from(".teste", 1, {scale:0, transformOrigin:"center bottom"}); observer.observe(target); count++; } function onChange(title, observe) { for (var entry of title) { if (entry.isIntersecting) { let i = ar.indexOf(entry.target); animations[i].play(); console.log('Em visão'); } else { return; } } } }) Does anyone have any idea how I can adjust just this detail?