Execute elements with same class or ids but independently

[wmosquini]

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?

[ZachSaucier]

Hello and welcome to the GreenSock forums!

 

The issue is that you're using a general selector in your from tween. You need to pass a reference to the specific element that is being intersected instead. So change

 

.from(".teste", ...

to

.from(target, ...

and that should do it.  

 

Happy tweening.

[wmosquini]

5 hours ago, ZachSaucier said:

Hello and welcome to the GreenSock forums!

 

The issue is that you're using a general selector in your from tween. You need to pass a reference to the specific element that is being intersected instead. So change

 

.from(".teste", ...

to

.from(target, ...

and that should do it.  

 

Happy tweening.

 

 

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

[wmosquini]

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:

 

[ZachSaucier]

11 minutes ago, wmosquini said:

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.

Can you create a minimal demo that recreates your issue? That would help us help you more. You can read about how in the thread below:

 

 

[wmosquini]

1 hour ago, ZachSaucier said:

Você pode criar uma demonstração mínima que recria seu problema? Isso nos ajudaria a ajudá-lo mais. Você pode ler sobre como no tópico abaixo:

 

 

 

Look here: 

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

 

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.

 

 

[ZachSaucier]

Thanks for the demo! I wanted to confirm my theory.

 

The problem is your return; inside of the monitoraScroll function. It is currently exiting the function completely if the element is not intersecting. Just comment it out (or remove it) to see it functioning properly:

 

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