Newbie question: ID (unique) to class (multiple usage)

[Danielovitch]

Hello all together, 

 

first: I am a newbie in javacript and GSAP, but I found a piece of code that I want to use in my websites for a cool animation. 

This is the code: 

// banner
    let the_purgatory = document.getElementById( 'the-purgatory' );
			
    let blow_up = gsap.to( the_purgatory, {
      
      duration: 0.5, 
      scaleX: 4, 
      scaleY: 4, 
      opacity: 0,
      ease: 'expo.inOut', 
      paused: true, 
      
    } );
    
    gsap.to( the_purgatory, {

      scrollTrigger: {

      	trigger: the_purgatory, 
        scrub: false, 
        start: () => 'top top', 
        end: () => the_purgatory.offsetHeight/2 + ' top', 
        onEnter: () => blow_up.restart().pause(), 
    	  onLeave: () => blow_up.play(), 
        onEnterBack: () => blow_up.reverse(), 
        onLeaveBack: () => blow_up.restart().pause(), 
        pin: true, 
				// markers: true
        
      }
    
    } );			

My aim is to use this code for multiple banners, but right now it's ID driven. I first changed the id to a class name at the banners. 

Then I investigate this code above. I changed "document.getelementbyID" to "document.getelementbyClass" and tried to add a foreach. 

the_purgatory.forEach( ( the_purgatory ) => {

I thought: Okay, I need the connection to the class, not the ID. Check by switching ID to class. And I need the script to be used every time the class comes up. So I added the foreach. 

That were my thoughts, but to repeat it, I am a newbie. Can someone explain me what need to happen, if I want to use this code on multiple banners via class?

Thanks in advance
Daniel

[elegantseagulls]

You'll likely just want to do something like this: 

const the_purgatories = document.querySelectorAll('.the-purgatory');

the_purgatories.forEach((purgatory) => {
	gsap.to(purgatory, { ... })
});

 

[Danielovitch]

Okay, I was on the right way  

// banner
    let all_purgatory = gsap.utils.toArray( '.the-purgatory' );
		
	all_purgatory.forEach( ( the_purgatory ) => {
			
    let blow_up = gsap.to( the_purgatory, {
      
      duration: 0.5, 
      scaleX: 4, 
      scaleY: 4, 
      opacity: 0,
      ease: 'expo.inOut', 
      paused: true, 
      
    } );
    
    gsap.to( the_purgatory, {

      scrollTrigger: {

      	trigger: the_purgatory, 
        scrub: false, 
        start: () => 'top top', 
        end: () => the_purgatory.offsetHeight/2 + ' top', 
        onEnter: () => blow_up.restart().pause(), 
    	  onLeave: () => blow_up.play(), 
        onEnterBack: () => blow_up.reverse(), 
        onLeaveBack: () => blow_up.restart().pause(), 
        pin: true, 
				// markers: true
        
      }
    
    } );
			
});