02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School

Building a SlideShow

This whole chapter is dedicated to practicing the skills we developed throughout the last few chapters.

Duration:

01:00:19

Created with

Ben Fhala

Ben Fhala

Ben Fhala is the creative force and founder behind 02geek, a pioneering platform dedicated to making web development accessible to everyone. With over 18 years of experience in the industry, Ben has a deep passion for teaching and a knack for breaking down complex concepts into easy-to-understand lessons.

Building a SlideShow Overview

What you'll learn

Learning new things is all about experience and engagement. This whole chapter is dedicated to practicing the skills we developed throughout the last few chapters. While we do so we will explore new topics such as object oriented programming, the text plug-in and a few other topics that we'll be weaved into our creation. So let's start creating a slideshow.

In this third chapter on GreenSock animation library we dive deeper inside as we create a slideshow. Let's get started with Chapter 3. We started off this chapter with the most cool usable and most commonly prevailing thing on the web: slideshows. By the end of this lesson you Will have a fully operational slideshow. In the process we will discover the this command.

The idea behind the this command is simple, when we're inside of a method and want to refer to the object that owns that method we don't know the name of the object. That is for the name is defined out of the function and there may be more than one object, more than one name. So instead we want to refer to our objects without referring to their name. This command enables us talk to our object without naming it directly.

The slideshow project

This whole chapter is dedicated to practicing the skills we developed throughout the last few chapters.

00:46

Creating a slideshow

By the end of this lesson you Will have a fully operational slideshow. In the process we will discover the this command.

14:32

Turning our slideshow to an OOP one

In the end of this lesson we will have a similar slideshow only one that is an object.

13:22

Making our slideshow more dynamic

In this lesson we revert back and update this logic by removing those labels and making our slideshow capable of running unlimited slides.

04:09

Using the GSAP TextPlugin

The TextPlugin Tweens the text content of a DOM element.

11:02

Taking the TextPlugin for a spin

In this lesson I wanted to show you how do you create custom animation and interactivity that is layered into the plug-in.

11:40

Completing the slideshow

By the end of the session lesson you we will have a fully working completed slideshow.

04:48
Download Source Files