Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Online Business Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development JavaScript

JavaScript Animations with GreenSock (GSAP)

Take your front-end web design to the next level by adding sophisticated, interactive animations to your projects
Rating: 4.5 out of 54.5 (219 ratings)
755 students
Created by David Sharkey
Last updated 4/2019
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • The basics of the GreenSock Animation Platform (GSAP)
  • How to add polish and professionalism to a webpage using JavaScript animations
  • How to create sophisticated UI elements with GSAP and jQuery
  • How to use easing to add character to your animations
  • How to create complex animation timelines
  • How to put what you learn into practice on an actual website

Course content

2 sections • 19 lectures • 1h 46m total length

  • Preview00:43
  • Preview06:03
  • Preview06:08
  • Simple Tweens Quiz
    1 question
  • Selectors
    08:16
  • Selectors Quiz
    1 question
  • Understanding the components of GSAP
    01:59
  • Introducing TimelineMax
    08:22
  • Timeline Quiz
    1 question
  • Easing
    06:07
  • staggerFrom and staggerTo
    03:51
  • Stagger Quiz
    1 question
  • Special Properties
    05:14
  • Special Properties Quiz
    2 questions
  • Labels and Timings
    07:25
  • Labels and Timings Quiz
    2 questions
  • Playback Controls
    09:53
  • Playback control quiz
    1 question
  • fromTo and staggerFromTo
    04:27
  • fromTo Quiz
    1 question

  • Preview01:56
  • The burger icon hover effect
    06:53
  • The full-screen nav menu
    07:44
  • The hero section
    05:43
  • The four column section
    05:41
  • The services section
    05:03
  • The rotating cogs
    04:42

Requirements

  • You should be comfortable with HTML and CSS
  • A very basic understanding of JavaScript and jQuery (not absolutely essential)
  • A computer and a code editor

Description

Do you sometimes feel that your web design projects feel a little flat? Lacking a bit of pizzazz? Do you browse award-winning websites and think "I wish I knew how to do flashy stuff like that"?

If that sounds like you, then the GreenSock Animation Platform (GSAP) might be what you're looking for!

GSAP is a collections of tools that enable you to unleash your creativity and write buttery-smooth tweens and timelines.  GSAP is built for performance, compatibility, and ease-of-use. It's no wonder that over 7 million websites use GSAP to give an extra layer of polish and professionalism to their projects.

This course will teach you everything you need for a solid foundation in GSAP. Upon completion of this course, you will have all the tools you need to create stunning JavaScript animations.

The course is split into two sections:

*** Section One

In section one, we will learn the main tools and features of GSAP, including TweenMax, TimelineMax, different types of tweens, easing, playback controls, and much more. By the end of this section you will have a solid foundation to take forward into real world projects.

*** Section Two

In section two, we will apply our newfound skills and techniques to an actual webpage. We will work on the homepage of a fictional company called AlphaStar. Using various GSAP tools, we will make a variety of UI enhancements to the page to make it more interactive, engaging and eye-catching.

Who are you?

My name is David Sharkey, and I've been using GreenSock for over 4 years. From simple animations to complex timelines, I have used GSAP in a variety of projects. In my career as a web designer, I can honestly say GSAP is one of the most fun, versatile tools I have ever worked with.

Over the years, my clients have loved the extra touches that GSAP can provide, and it has made my websites stand out in a crowded market.

Why take this course?

Take this course if you want to take your front-end web design to the next level by incorporating Javascript animations into your skillset.

Mastering GSAP will unleash your creativity and free you from the restrictions of HTML and CSS. Wow your clients, earn more money and attract higher calibre employers by harnessing the amazing power of the GreenSock Animation Platform.

Complete your purchase and let's get tweening!


*****Student Feedback*****


"This course serves as an excellent introduction to GreenSock. I haven't even completed the course yet and I'm already able to make some quite complex animations. Great course, 5/5."

- John Edwards

Who this course is for:

  • People who are comfortable building a website, but would like their work to be more interactive, engaging and polished.
  • Those interested in animating for the web
  • Anyone who wants to learn to make more sophisticated UI elements

Instructor

David Sharkey
Professional WordPress Web Designer and Digital Marketer
David Sharkey
  • 4.6 Instructor Rating
  • 530 Reviews
  • 1,934 Students
  • 4 Courses

Hi! Thanks for checking out my profile. I'm David, a web design addict from Scotland.

I've been designing websites since the late 90's - first as a hobby and now as a full-time job. I've worked on e-learning websites, e-commerce websites, real estate websites, and other complex projects.

I'm so excited to be on Udemy and to share some of the knowledge I've picked up over the years. I love to teach and interact with people, so this is just the perfect outlet for me.

My specialist areas include: WordPress, HTML, CSS, JavaScript animations, The Adobe Creative Suite, Social Media Marketing.

I'm truly passionate about creating cool things with computers, and I hope that enthusiasm comes through in my courses. I put a lot of time and effort into creating my courses, and I'm excited to be able to share with you what I know.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.