GreenSock: ScrollTrigger on Multiple Alternating Elements

Topics Covered in This JavaScript Tutorial:

Creating Individual ScrollTrigger Animations for Multiple Elements, Implementing Alternating Animation Directions for Visual Harmony, Resolving Horizontal Scroll Issues in Complex Animations

Exercise Preview

Exercise Overview

In this comprehensive exercise, you'll master the art of applying ScrollTrigger animations to multiple elements simultaneously while maintaining individual control over each animation. This technique is essential for creating sophisticated, professional scroll experiences that enhance user engagement without overwhelming the interface. You'll learn to avoid common pitfalls that plague even experienced developers and implement best practices that ensure smooth, performant animations across different viewport sizes.

Getting Started

1. For this exercise we'll be working with the GSAP-ScrollTrigger-Multiple folder located in Desktop > Class Files > JavaScript Class. Open that folder in your code editor if it allows you to (like Visual Studio Code does).
2. In your code editor, open index.html from the GSAP-ScrollTrigger-Multiple folder.

3. Preview index.html in a browser to understand the baseline experience.

   • Scroll down and observe the alternating sections that each feature a photo paired with descriptive text.
   • Notice how the static layout feels flat—we'll transform these sections into dynamic, engaging elements that respond beautifully to user scroll behavior.

4. Keep the page open in your browser for quick testing as we build the animation system.

Setting up a ScrollTrigger Animation

We'll begin by creating a foundational animation, then iterate and refine it to achieve professional-grade results. This methodical approach helps you understand each component's role in the final animation.

1. Since we're already linked to the GSAP core and ScrollTrigger plugins, we can immediately start coding our animation system. At the bottom of index.html, add this initial tween within the script tag to create a smooth fade-in effect with subtle horizontal movement:

   <script>
      gsap.from('section img', {scrollTrigger:'section img', X:-100, opacity:0});
   </script>

2. Save your changes and switch to the browser to test the initial implementation.

   • Scroll to the top and reload the page to reset all animations.
   • Scroll down slowly and observe how the first image slides in from the left while fading in—this creates a professional entrance effect.
   • Continue scrolling to the next image with the Convenient heading. Position your viewport so you can see portions of multiple images simultaneously.

   • Reload the page again and you'll discover a critical flaw: all images animate simultaneously rather than individually. This is one of the most frequent ScrollTrigger mistakes developers encounter, extensively documented at greensock.com/st-mistakes.

     The solution requires applying separate ScrollTrigger instances to each image through iteration. Before implementing this fix, let's perfect the animation parameters.

3. To unlock advanced scrollTrigger configuration options, we need to convert the trigger from a simple string to an object. Change scrollTrigger from 'section img' to {}:

   gsap.from('section img', {scrollTrigger:{}, X:-100, opacity:0});

4. Improve code readability by adding strategic line breaks—this becomes crucial as animations grow more complex:

   gsap.from('section img', {
      scrollTrigger:{}, 
      X:-100, opacity:0
   });

5. Restore the trigger selector and enable visual debugging markers to understand the animation timeline:

   gsap.from('section img', {
      scrollTrigger:{trigger:'section img', markers:true}, 
      X:-100, opacity:0
   });

6. Fine-tune the animation timing and add scrub functionality for smooth, scroll-linked motion:

   gsap.from('section img', {
      scrollTrigger:{trigger:'section img', start:'top 85%', end:'bottom 80%', scrub:1,  markers:true}, 
      X:-100, opacity:0
   });

7. Save and test the enhanced animation in your browser.

   • Return to the top and reload to reset all animations.
   • Scroll down and notice how the first image now smoothly scrubs with your scroll position, creating a more organic, connected feeling between user input and visual response.

Making ScrollTrigger Work with Each Image Individually

Now we'll solve the fundamental issue of multiple elements sharing a single animation instance. This technique is essential for creating scalable animation systems that work regardless of content quantity.

1. Create a variable to store the complete array of target images, enabling programmatic access to each element:

   <script>
      let sectionImg = document.querySelectorAll('section img');

2. Implement a for loop to iterate through each image, creating individual ScrollTrigger instances:

   let sectionImg = document.querySelectorAll('section img');
   
   for(let i=0; i < sectionImg.length; i++) {
      gsap.from('section img', {

   Code Omitted To Save Space

   });
   };

3. Replace the generic selector with specific array references based on the loop counter. This ensures each animation targets only its corresponding element:

   for(let i=0; i < sectionImg.length; i++) {
      gsap.from(sectionImg[i], {
         scrollTrigger:{trigger:sectionImg[i], start:'top 85%', end:'bottom 80%', scrub:1, markers:true}, 
         X:-100, opacity:0
      });
   };

4. Save and reload to test the individualized animation system.

   • Start from the page top and scroll down methodically, observing how each image now animates independently as it enters the viewport.
   • While the individual triggering works perfectly, the uniform left-to-right motion feels repetitive. Since images alternate sides, we should make them animate toward the center, creating visual harmony and drawing attention to the content relationship.

Alternating Directions for Each Row

Professional scroll animations often employ alternating patterns to create visual rhythm and prevent monotony. We'll implement a dynamic system that calculates appropriate movement directions based on element position.

1. To create alternating directions, we'll dynamically calculate X values using positive and negative amounts. Start by storing the base movement distance as a variable for easy adjustment:

   for(let i=0; i < sectionImg.length; i++) {
      let movement = 100; // odd rows
      gsap.from(sectionImg[i], {

   Code Omitted To Save Space

   });
   };

   NOTE: Notice our animation currently uses -100, but this variable-based approach will provide more flexibility for the alternating system we're building.

2. Replace the hard-coded value with our dynamic movement variable:

   for(let i=0; i < sectionImg.length; i++) {
      let movement = 100; // odd rows
      gsap.from(sectionImg[i], {
         scrollTrigger:{trigger:sectionImg[i], start:'top 85%', end:'bottom 80%', scrub:1, markers:true}, 
         X:movement, opacity:0
      });
   };

3. Add conditional logic to detect odd versus even positions and adjust movement direction accordingly:

   for(let i=0; i < sectionImg.length; i++) {
      let movement = 100; // odd rows
      if( i % 2 == 0 ) {
         movement = -movement; // even rows
      };
      gsap.from(sectionImg[i], {

   NOTE: The modulus operator (%) returns the remainder from division. Even numbers divided by 2 have no remainder (0), while odd numbers have a remainder (1). This mathematical property provides a reliable way to alternate behavior.

   The negative assignment flips the movement direction. Since arrays are zero-indexed, sectionImg[0] gets -100 (matching our original effect), while sectionImg[1] gets +100 (opposite direction).

4. Save and test the alternating animation system.

   • The images should now animate inward toward their associated text, creating a more sophisticated visual flow.
   • Next, we'll apply the same logic to text elements, ensuring they move in the opposite direction so both text and images converge toward the center, maximizing visual impact.

Animating the Text

Coordinated text animation completes the professional effect, with text and images moving toward each other to create focal points that guide user attention naturally.

1. Create a dedicated variable for text elements, maintaining consistency with our image array approach:

   <script>
      let sectionImg = document.querySelectorAll('section img');
      let sectionText = document.querySelectorAll('section.text');

2. Duplicate the gsap.from() animation to create a foundation for text animation:

   for(let i=0; i < sectionImg.length; i++) {

   Code Omitted To Save Space

   gsap.from(sectionImg[i], {
         scrollTrigger:{trigger:sectionImg[i], start:'top 85%', end:'bottom 80%', scrub:1, markers:true}, 
         X:movement, opacity:0
      });
      gsap.from(sectionImg[i], {
         scrollTrigger:{trigger:sectionImg[i], start:'top 85%', end:'bottom 80%', scrub:1, markers:true}, 
         X:movement, opacity:0
      });
   };

3. Update the second animation to target text elements instead of images:

   gsap.from(sectionImg[i], {
         scrollTrigger:{trigger:sectionImg[i], start:'top 85%', end:'bottom 80%', scrub:1, markers:true}, 
         X:movement, opacity:0
      });
      gsap.from(sectionText[i], {
         scrollTrigger:{trigger:sectionText[i], start:'top 85%', end:'bottom 80%', scrub:1, markers:true}, 
         X:movement, opacity:0
      });
   };

4. Create the convergence effect by making text move in the opposite direction from its paired image:

   gsap.from(sectionImg[i], {

   Code Omitted To Save Space

   });
      gsap.from(sectionText[i], {
         scrollTrigger:{trigger:sectionText[i], start:'top 85%', end:'bottom 80%', scrub:1, markers:true}, 
         X:-movement, opacity:0
      });
   };

5. Save and test the complete coordinated animation system.

   Both text and images should now animate inward toward each other, creating compelling focal points that enhance content hierarchy and user engagement.

Hiding the Markers

With animations perfected, we'll remove the debugging markers for a clean production experience while preserving the ability to re-enable them for future development.

1. Disable the markers in both animations by changing true to false:

   NOTE: Keeping the marker property with false values allows quick re-enabling during future debugging sessions—a professional development practice.

2. Save and test the cleaned-up animation experience.

   • The page now presents a polished, production-ready appearance without debugging overlays.
   • Narrow your browser window until images begin scaling down responsively.
   • You may notice unwanted horizontal scrolling capability, even though no content should extend beyond the viewport width.

   This horizontal scroll issue occurs because elements animate from positions outside the viewport, temporarily expanding the page width. This is a common side effect of scroll animations that requires a specific CSS solution.

Fixing Unwanted Horizontal Scrolling

Professional scroll animations require careful overflow management to prevent unintended scrolling behaviors that degrade user experience, particularly on mobile devices where accidental horizontal scrolls are especially problematic.

1. In your code editor, navigate to the css folder and open main.css to implement the overflow solution.

2. Add a new CSS rule above the existing body rule to prevent horizontal overflow while preserving vertical scrolling:

   html, body {
      overflow-X: hidden;
   }

3. Save the CSS changes and reload the page for final testing.

   • Horizontal scrolling issues should be completely resolved, providing a smooth, intentional user experience.
   • Congratulations! You've successfully created a professional-grade scroll animation system that combines individual element control, sophisticated directional logic, and proper overflow management—skills essential for modern web development.