Animate sections with the same classes individually

[bennyboy1978]

Hi, what would be the best way to make the sections here animate individually? For example, the parallax effect stops working on the bottom section because it's already been animated. Would it need a loop and how if so how would I do that? Thanks!

See the Pen RwjYxNe by Bennyboy (@Bennyboy) on CodePen

[tomividi]

Hi, currently you are animating everything at the same time and based on the same trigger. As you already guessed you'd have to loop through the different elements and create animations/scrolltriggers for each element.

 

Look at this JS code, particularly at the forEach portion and how the ScrollTrigger uses the element reference as the trigger:

let banners = document.querySelectorAll(".banner")

banners.forEach( (element) => {
	let background = element.querySelector(".background")
	let headings = element.querySelectorAll("h1, h2")
	
	let tl = gsap.timeline()
	   .from(background, {backgroundPosition:"60% 0%", filter:"brightness(0.1)", duration:1})
		.from(headings, {y:200, stagger:0.1}, 0)
	
	ScrollTrigger.create({
		trigger:element,
		start:"top 90%",
		toggleActions:"play none none reverse",
		animation:tl
	})
		
})

I can highly recommend using the  https://www.creativecodingclub.com subscription for a month to learn about these basics. The js code above is from that.

 

My best,
T

[Aize]

That's great! Thanks very much @tomividi!