ScrollTo Plugin: Board Member Biographies

Topics Covered in This GreenSock Tutorial:

Master GSAP's ScrollTo Plugin for smooth navigation, implement dynamic functionality with navigation buttons, and create sophisticated rollover effects using CSSPlugin's className property to elevate user interaction.

Exercise Preview

Exercise Overview

In this comprehensive exercise, you'll harness the power of GSAP's ScrollTo plugin to create a sophisticated navigation system that smoothly scrolls to specific page sections. Beyond basic functionality, you'll craft an animated menu system that leverages the className property of GSAP's CSSPlugin to deliver polished, professional interactions that enhance user experience and demonstrate modern web animation techniques.

Previewing the Finished Animation

Before diving into the code, let's examine the polished result you'll be creating. This preview will help you understand the animation goals and user experience we're targeting.

1. Launch Google Chrome to preview the completed animation.

2. In Chrome, press Cmd–O (Mac) or CTRL–O (Windows), navigate to Desktop > Class Files > yourname-GSAP Class > Board Members, and double–click on finished.html.

3. Interact with the navigation bar on the left side of the page by hovering over and clicking each name. Notice how each selection triggers a smooth, eased scroll to the corresponding biography section, while the hover states provide immediate visual feedback through color transitions and subtle scaling effects.

4. Close the page when you've finished exploring the interactions.

Examining the DOM Structure & JavaScript Foundation

Understanding the underlying HTML structure and JavaScript setup is crucial for implementing effective GSAP animations. Let's analyze the foundation we'll be building upon.

1. In your code editor, open yourname-GSAP Class > Board Members > start.html (or the entire Board Members folder if your editor supports project-based workflows).

2. Preview start.html in Google Chrome to see the starting point.

3. The page displays all biographical content with polished CSS styling, but the navigation buttons currently lack functionality. This is intentional—we'll be implementing the interactive behavior step by step. Keep this tab open in Chrome for testing as we develop.

4. Return to your code editor and examine the semantic HTML structure on lines 49–76, paying special attention to the highlighted data attributes:

   <ul>
      <li data-scrollTo="#person1Bio">Simon Rich</li>
      <li data-scrollTo="#person2Bio">Rodrigo Jefferson</li>
      <li data-scrollTo="#person3Bio">Alice Jennings</li>
      <li data-scrollTo="#person4Bio">Dr. Smedley Harms</li>
   </ul>
   <div id="main">
      <h1>Board Members</h1>
      <div class="section" id="person1Bio">
         <h2>Simon Rich</h2>

   Code Omitted To Save Space

   </div>
      <div class="section" id="person2Bio">
         <h2>Rodrigo Jefferson</h2>

   Code Omitted To Save Space

   </div>
      <div class="section" id="person3Bio">
         <h2>Alice Jennings</h2>

   Code Omitted To Save Space

   </div>
      <div class="section" id="person4Bio">
         <h2>Dr. Smedley Harms</h2>

   Code Omitted To Save Space

   </div>
   </div>

5. This structure demonstrates several best practices for modern web development:

   • Navigation elements are properly structured as an unordered list for semantic accessibility.
   • Each list item uses HTML5 custom data attributes (data-scrollTo) to store target selectors, creating a clean separation between content and functionality.
   • The data attribute values correspond directly to the CSS IDs of the target biography sections, establishing a clear content relationship.

6. Examine the pre-built jQuery event handler structure on lines 87–97. These empty function wrappers will streamline your development process:

   $navButtons.click(function(){ 
   
   });
   
   $navButtons.mouseenter(function(){
   
   });
   
   $navButtons.mouseleave(function(){
   
   });

Using GreenSock's ScrollTo Plugin

The ScrollTo plugin extends TweenLite and TweenMax with the ability to animate scroll positions smoothly, providing a superior alternative to browser's default jump-to behavior. This plugin works with both window scrolling and scrollable div content, making it versatile for various layout scenarios. For comprehensive documentation and advanced techniques, reference the official docs at: greensock.com/docs/Plugins/ScrollToPlugin

1. First, include the ScrollTo plugin by adding the script reference on line 79:

   <script src="js/gsap/TweenMax.js"></script>
   <script src="js/gsap/plugins/ScrollToPlugin.js"></script>
   <script src="js/jquery/jquery-1.10.1.min.js"></script>

2. Before implementing the navigation system, let's test the plugin's core functionality with a simple demonstration. Add this code after the mouseleave() function, around line 99:

   TweenLite.to(window, 2, {scrollTo:600});

   This tween targets the browser window object and animates its scroll position to 600 pixels from the top over a 2-second duration, demonstrating pixel-precise scroll control.

3. Save the file and reload the page in Chrome.

   The page immediately scrolls downward 600 pixels with smooth easing. This demonstrates the plugin's ability to create fluid scroll animations that feel natural and professional.

4. Try reloading the page again. Notice that it maintains its position rather than scrolling from the top.

   This behavior is a feature of modern browsers that preserve user scroll positions across page reloads for improved user experience. Understanding this behavior is crucial when developing scroll-based navigation systems.

5. Keep the Chrome tab open for continued testing and return to your code editor.

6. Instead of targeting specific pixel coordinates, let's demonstrate element-based scrolling by targeting the Rodrigo Jefferson biography section. Update the scrollTo value:

   TweenLite.to(window, 2, {scrollTo:"#person2Bio"});

7. Switch to Chrome and test the element-based scrolling:

   • Manually scroll to the top of the page first.
   • Reload the page to see the smooth scroll animation to the Rodrigo Jefferson section.

Adding Functionality to the Navigation Buttons

Now we'll implement the core navigation functionality by connecting our HTML5 data attributes to the ScrollTo plugin. This approach creates a scalable system that's easy to maintain and extend.

1. Remove the test code to prepare for the actual navigation implementation:

   TweenLite.to(window, 2, {scrollTo:"#person2Bio"});

2. Inside the click() function (around line 87), add debugging code to understand the click event context:

   $navButtons.click(function(){ 
      console.log(this);
   });

   The JavaScript this keyword refers to the specific DOM element that triggered the event, allowing us to access its properties and data attributes.

3. Save the file, switch to Chrome, and reload the page.
4. Open Chrome DevTools by pressing Cmd–Opt–J (Mac) or CTRL–Shift–J (Windows) to access the Console.

5. Click each navigation button and observe the console output showing the complete HTML element.

   The logged output reveals each element's attributes, including our custom data-scrollTo values. These values contain the CSS selectors for our target sections.

6. Extract the specific data attribute value by modifying the console log:

   $navButtons.click(function(){ 
      console.log(this.getAttribute("data-scrollTo"));
   });

7. Save and reload the browser to test the updated code.

8. Click the navigation buttons again. The console now displays clean selector strings like #person1Bio, #person2Bio, etc.

   These selectors can be passed directly to GSAP's ScrollTo plugin, creating the connection between our navigation and content sections.

9. Return to your code editor to implement the scroll functionality.

10. Replace the console.log statement with the functional scroll code:

    $navButtons.click(function(){ 
       var myScrollPosition = this.getAttribute("data-scrollTo");
       TweenLite.to(window, 1, {scrollTo:myScrollPosition});
    });

11. Save the file, reload Chrome, and test the complete navigation system:

    • Close the DevTools panel to see the full page.
    • Click each navigation button to verify smooth scrolling to the correct biographical sections.

Adding Rollover Effects Using CSSPlugin's ClassName Property

Professional interfaces require sophisticated hover states that provide immediate feedback. We'll implement dynamic rollover effects using GSAP's className property, which offers precise control over CSS class transitions and creates smooth, interpolated animations between states.

1. Navigate to the CSS section in the document head to define our hover state styling.

2. Add the active state rule below the existing .section rule:

   .active { 
      color:#89cd25;  
   }
   h1 {
      font-size:80px;
   }

3. Implement the hover-in animation in the mouseenter() function (around line 95):

   $navButtons.mouseenter(function(){
      TweenLite.to(this, 0.2, {className:"+=active"}); 
   });

   The className property with "+=active" syntax adds the active class while smoothly animating the property differences. This approach provides more control than instant CSS transitions and integrates seamlessly with other GSAP animations.

4. Save and test the hover-in effect in Chrome.

   The text transitions to green smoothly, but persists after the mouse leaves. Let's implement the complementary hover-out animation.

5. Complete the interaction by adding the hover-out animation to the mouseleave() function:

   $navButtons.mouseleave(function(){
      TweenLite.to(this, 0.2, {className:"-=active"}); 
   });

   The "-=active" syntax removes the active class and animates the return to the default state, creating a cohesive interaction loop.

6. Save and test the complete hover system in Chrome.

   The buttons now provide immediate visual feedback with smooth transitions. Let's enhance this further with more sophisticated visual effects.

7. Expand the hover state with additional visual enhancements by updating the .active class around line 20:

   .active { 
      color:#89cd25;  
      border-left:20px solid #89cd25;
      line-height:30px;
   }

   This approach demonstrates a key advantage of CSS-driven animation states: you can modify visual effects by updating CSS without touching JavaScript, making maintenance and iteration much more efficient.

8. Save and preview the enhanced interactions in Chrome. The buttons now feature dynamic borders and height changes that create engaging, tactile feedback.

Enhancing the Way the Page Loads

Modern web applications benefit from thoughtful load sequences that orient users and create polished first impressions. We'll implement subtle page initialization animations that ensure consistent starting positions and elegant content reveals.

1. Add an immediate scroll-to-top animation below the mouseleave() function (around line 105):

   TweenLite.to(window, 0.01, {scrollTo:0});

   This micro-animation runs imperceptibly fast but ensures users always start at the top of the page, regardless of browser scroll position memory.

2. Test the scroll reset functionality in Chrome:

   • Scroll down to any biography section.
   • Reload the page and observe the instant return to the top position.

3. Prepare for a sophisticated page reveal by initially hiding the content. Add the visibility property to the body CSS rule (around line 10):

   body{
      font-family: Arial, sans-serif;
      margin-top:40px;
      visibility:hidden;
   }

   This prevents any flash of unstyled content and allows us to control the initial page presentation completely.

4. Implement the page fade-in animation around line 107:

   TweenLite.to(window, 0.01, {scrollTo:0});
   TweenLite.from("body", 0.5, {autoAlpha:0});

5. Save and reload Chrome to experience the subtle but elegant fade-in effect that makes the page feel more refined and intentional.

6. Complete the load sequence with a dynamic navigation reveal:

   TweenLite.from("body", 0.5, {autoAlpha:0});
   TweenLite.from("ul", 0.5, {X:-500, delay:0.5});

   The navigation slides in from off-screen with a slight delay, creating visual interest and drawing attention to the interactive elements. Note that for this focused exercise, we're using individual tweens rather than a timeline—sometimes simplicity is the most appropriate choice.

7. Save and preview the complete loading experience in Chrome. The combination of fade-in and slide-in animations creates a professional, polished entry sequence that enhances the overall user experience.