How to fade in widgets using ScrollMagic in Genesis

This tutorial provides the steps to fade in widget areas on a custom full-width front page in Genesis using the ScrollMagic javascript library.

We are going to create 5 front page widget areas and display these on a static front page using this method. Then enqueue ScrollMagic and initialize it like so:

• create a new ScrollMagic Controller
• for each front page section a) create a ScrollMagic Scene b) add fade-in class and add the Scene to ScrollMagic Controller.

Finally, we will add CSS to set the opacity of widget areas inside the section to 0 to begin with, set a transform in the Y direction and specify an ease-out transition so the animation happens in 1 second. When a section gets the fade-in class as it is scrolled to, opacity will be set to 1 for the widget area.

Step 1

Add the following in child theme's functions.php:

// Register front-page widget areas.
for ( $i = 1; $i <= 5; $i++ ) {
	genesis_register_widget_area(
		array(
			'id'          => "front-page-{$i}",
			'name'        => __( "Front Page {$i}", 'my-theme-text-domain' ),
			'description' => __( "This is the front page {$i} section.", 'my-theme-text-domain' ),
		)
	);
}

Step 2

Create an empty Page named say, Home and set it as static front page at Settings > Reading.

Step 3

Upload ScrollMagic.min.js to child theme's js directory.

Create a file named say, scrollmagic-init.js in the same location having this code: