Learn Greensock, Jekyll and Twit

Animations attract the eye and add a higher level of engagement for your users. But they’re not easy to set up, and they don’t always look the way they should on every browser. 

Greensock is the best platform available for creating performant, highly-customizable animations. This course will walk you through the features of Greensock, including how to:

- animate an element
- manually control an animation
- animate between CSS classes

…and more, with cross-browser support to ensure your animations look sharp everywhere.

Ultra high-performance, professional-grade HTML5 animation for the modern web

greensock

Create Amazing Animations with GreenSock

In this course we’ll learn how to create Twitter bots. We’ll first learn how to interface with the Twitter API using Twit.js, which allows us to post statuses, search tweets, and interact with followers. We’ll create several example bots that show the diversity of possibilities, using powerful tools such as RiTa.js, Google’s Cloud Vision API, and Tracery. We’ll learn how to tweet data from Google Spreadsheets, and to compose and tweet a song for an audio bot. We’ll also learn how to host our bot logic on Heroku and Docker. 

Twitter API Client for node

Supports both the REST and Streaming API.

twit

Create your own twitter bots

Jekyll is a blog-aware static site generator. You can write text in markdown or HTML and Jekyll uses layouts to create a static website. You can tweak how you want the site URLs to look, what data gets displayed on the site, and more.

After watching the collection you'll be able to:

* Install Jeykll and run it locally
* Create a new blog post
* Install plugins to add new features to your blog

Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as "a simple, blog aware, static site generator".

jekyll

Create A Blog With Jekyll

GreenSock supports all of the CSS3 3d properties, so you can freely rotate around X, Y, and Z axises with rotationX, rotationY, and rotationZ. Once that's set up, you can tweak the perspective of the element with transformPerspective.

Spin Elements in 3d with GreenSock

By default, elements use their own perspective, so if you rotate multiple elements on the page the perspective will seem a bit off for each of them. The solution is to set the perspective on the container element, then each child element will follow the parents' perspective.

Control the Shared 3d Perspective of Multiple Elements with GreenSock

Sometimes you want to leave an animation looping without any user interaction. This is done using the "repeat" and "yoyo" properties combined to keep the tween moving back and forth from the start properties to the end properties.

Loop a Tween Forever Using Yoyo and Repeat with GreenSock

The `gsap.set()` tween (or animation container) is a zero-duration tween that instantly applies a property to an HTML element. In addition, there is a subtle but important difference between `opacity` and Greensock's `autoAlpha` properties. You will learn how to hide a menu on page load and also how to prevent the element from flashing on page load. This lesson contains Greensock's basic building blocks that are used to create advanced animations with UI elements.

To add the latest Greensock library to your project, go to [Greensock's website](https://greensock.com/). Fun fact: GSAP stands for Greensock Animation Platform, and their current latest version is GSAP 3!

A common programming convention for Greensock I like to follow is, if you're going to animate a property with Greensock, keep it in Greensock, otherwise, if you are not going to animate a property, keep it in your CSS.

Hide a Menu with GSAP3's set() Tween and autoAlpha Property

Jekyll is a blog-aware, static site generator written in Ruby. 

Requirements:
* Ruby version 2.5.0 or above
* RubyGems

Install the Jekyll Ruby gem on macOS quickly with just a few terminal commands and have a blog-aware site running locally.

Install Jekyll and Create a New Project

Blogging is built into Jekyll. You write blog posts as markdown or HTML files and Jekyll turns them blog posts. They follow a specific naming convention to be picked up and used by Jekyll

All blog post files require front matter. Front matter is a snippet of YAML at the top of a file. Front matter is used to set your layouts and meta data.

Create New Blog Post with Jekyll

Jekyll has a plugin system that allows you to add custom features to your site. There are many plugins available or you can even write your own. You can view a list of plugins at [Planet Jekyll](https://github.com/planetjekyll/awesome-jekyll-plugins)

Liquid is a templating language written in Ruby to output to the browser 

[Liquid Documentation](https://shopify.github.io/liquid/)

Install a Jekyll Plugin

We’ll get a real-time stream of tweets, and learn how to filter a stream by keyword, location, and user.

Use the Twitter Stream API with Twit.js

In this lesson, our bot will tweet hello to the Twitter world! We'll do this by using Twit's POST method to post our status to the statuses/update endpoint.

Post Statuses with Twit.js

In this lesson, we’ll create multiple functions to request, download, and save photos and data from NASA's API, and then have our bot upload these photos to Twitter and post them along with their descriptions. We'll also learn how to tweet videos using a video from NASA’s space archives.

Tweet Media Files with Twit.js

We’ll learn how your bot can get its list of followers, follow people, and look up friendships. We'll use Twit's GET method to get our followers at the followers/list endpoint, to get the users we follow at the friends/ids and friends/list endpoints, and to look up our friendships with the friendships/lookup endpoint. We'll also use Twit's POST method to follow someone at the friendships/create endpoint, and to send messages by posting to the direct_messages/new endpoint. 

Work with Users in Twit.js

We’ll learn the basics of interacting with tweets, including retweeting, deleting, favoriting, and replying to tweets. We'll get our home timeline by using Twit's GET method to access the `statuses/home_timeline` endpoint, including the count parameter, which lets us get back a certain number of tweets. We'll also pass it a callback. We'll learn how to cycle through the data (the tweets) we get back and see what information is included. We'll learn how to retweet statuses by posting to `statuses/retweet` and including the tweet id. We can unretweet by posting to `statuses/unretweet` with the same tweet id. We'll also learn how to like a tweet by posting to `favorites/create` with a tweet id, and unlike a tweet by posting to `favorites/destroy` with a tweet id. We'll also learn how to reply to a tweet by posting to `statuses/update`, with a status that includes the handle of the user we're replying to and `in_reply_to_status_id` parameter, which is the id of the tweet we're replying to. We'll learn how to delete a tweet by posting to `statuses/destroy` with the tweet's id. 

Interact with Tweets with Twit.js 

We’ll learn how to search tweets with the Twitter Search API, using Twit's GET method to get the search/tweets endpoint. We'll use the query and count parameters to get the search term(s) and number of tweets that we want. We'll learn how to get exact phrases, multiple words, one of several words, emoticons, hashtags, photos/videos, urls, and how to remove words from our results. We'll learn how to implement the safe filter and how to filter by media, website, or date. We'll learn how to get recent results, popular results, results by location, and results by language. 

The search API returns for relevance, and not completeness. If you want all the tweets from a search term, you should use the stream API (which we'll go over in the next lesson). 

Use the Twitter Search API with Twit.js

We’ll go over the basic Twitter bot setup, including how to start a project from scratch, install necessary packages, and store our private keys in environment variables. 

Set Up a Basic Twitter Bot with Twit.js

In this lesson, we will look at Greensock's Draggable API. We will implement a scrollable `<div>` container and explore some options available.

Create scrollable DOM elements with Greensock

[Jekyll](https://jekyllrb.com/) is a static site generator built in [Ruby](https://www.ruby-lang.org/en/) and available to generate and host websites on [GitHub Pages](https://pages.github.com/). In this course, you'll install the Jekyll gem, use the command line tool to generate a new project, inspect the scaffolded project, and finally, serve the starter website.

Install Jekyll and generate initial, scaffolded website

Modern development requires modern tooling. Rather than adding GreenSock as a script to an HTML page, we're going to install GreenSock using Yarn and set up our development environment using Parcel. This will allow us to quickly iterate and test out our animation ideas. GreenSock is abbreviated as `gsap` when importing.

Setup GreenSock as a Module with Parcel

Animating an element to a click event is as simple as passing the x and y coordinates of the click event to the properties of the `TweenMax.to` call. To be able to center the element where the mouse clicks, you also need to adjust the special xPercent and yPercent properties so the element is properly offset.

Topics

Instructors

Content Type