staggerFromTo does not work on element list

[wmosquini]

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?

[OSUblake]

Your code needs more context. Please make a demo.

 

[ZachSaucier]

I think this is what he means:

 

See the Pen jONgKyz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

FWIW, it does work in the beta version of GSAP. @GreenSock

[wmosquini]

31 minutes ago, OSUblake said:

Seu código precisa de mais contexto. Por favor, faça uma demonstração.

 

 

Follow the demo:

 

See the Pen eYOeGXP by wendell-mosquini-pozzatti (@wendell-mosquini-pozzatti) on CodePen

 

 

Note that .staggerFromTo does not work in for, whereas From works normally.

[OSUblake]

Why are you even using a staggger if there's only 1 element?

[OSUblake]

And this won't work because the element has no size.

vetorAnimacoes[contador] = new TimelineMax({paused:true}).from(target, 1, {scale:0, opacity: 0});  

 

[wmosquini]

1 minute ago, OSUblake said:

E isso não funcionará porque o elemento não tem tamanho.

 

 

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);  

 

 

4 minutes ago, OSUblake said:

Por que você está usando um staggger se existe apenas um elemento?

 

There are actually 6 elements.
.uk-grid> div (all 6).
Each has to perform the animation individually.

[OSUblake]

5 minutes ago, wmosquini said:

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:

 

Again, there is nothing to stagger. There is only ONE element.

 

for (let target of vetorElementos) {
  console.log(target)
}

 

What is the animation supposed to do?

[OSUblake]

If you're trying to do a stagger animation by rows, then you would need do something like this. It could be written in a more dynamic way, but I'm just showing the basics.

 

See the Pen 139c33f144c69785eb547c67ac36d3a7 by osublake (@osublake) on CodePen

 

[wmosquini]

47 minutes ago, OSUblake said:

If you're trying to do a stagger animation by rows, then you would need do something like this. It could be written in a more dynamic way, but I'm just showing the basics.

 

 

 

 

 

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.

[wmosquini]

53 minutes ago, OSUblake said:

If you're trying to do a stagger animation by rows, then you would need do something like this. It could be written in a more dynamic way, but I'm just showing the basics.

 

 

 

just a question.

Is there any way to map elements other than by class? Ex: .uk-grid> div?

The question is why this grid structure will be assembled automatically in php, depending on the amount of elements, so I won't be able to know how many elements will be inside the .uk-grid, so it gets a bit more complicated to use the querySelectorAll set in classes. , ideally if he mapped the tags.
Any suggestion?

 

[OSUblake]

2 minutes ago, wmosquini said:

Is there any way to map elements other than by class? Ex: .uk-grid> div?

 

I guess you could get the position of every element using .getBoundingClientRect() and sort the elements into an array of rows. You can determine if an element is on a new row by comparing an element's .top value against the previous element's .top value.

 

So you would end up with an array of arrays.

const grid = [
  [element, element, element],
  [element, element, element],
  [element, element]
];

// inside a loop
const row = grid[i];
const element = row[0]; // first element in row
element.myAnimation = new TimelineMax({ paused: true })
  .staggerFromTo(row, 1, {}, {});

 

Does that make any sense? I might be able to make a demo of how to do that later if you need more help.

[wmosquini]

45 minutes ago, OSUblake said:

 

I guess you could get the position of every element using .getBoundingClientRect() and sort the elements into an array of rows. You can determine if an element is on a new row by comparing an element's .top value against the previous element's .top value.

 

So you would end up with an array of arrays.

const grid = [
  [element, element, element],
  [element, element, element],
  [element, element]
];

// inside a loop
const row = grid[i];
const element = row[0]; // first element in row
element.myAnimation = new TimelineMax({ paused: true })
  .staggerFromTo(row, 1, {}, {});

 

Does that make any sense? I might be able to make a demo of how to do that later if you need more help.

 

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.

[OSUblake]

"i" is just a number.

 

If you know how many columns are in your grid, you can do this.

 

See the Pen 1836c00a5907053b0810decfd0189a4b by osublake (@osublake) on CodePen