Learn 11ty, Greensock and Pm2

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

Eleventy, or 11ty,  is a simple yet very powerful static site generator. It does not require any config to get started.

This what it will take you to get an 11ty project running.

```
npm install -g @11ty/eleventy
echo '# Page header' > README.md
eleventy
```

After watching this collection you will be able to:

* Bootstrap a simple 11ty website
* Use 11ty layouts
* Chaining multiple 11ty layouts
* Use 11ty Collections
* Create pages from data

...and much more

Eleventy was created to be a JavaScript alternative to Jekyll. It’s zero-config by default but has flexible configuration options. Eleventy works with your project’s existing directory structure.

Eleventy uses independent template engines. We don’t want to hold your content hostage. If you decide to use something else later, having your content decoupled in this way will make migration easier.

11ty

Getting Started with Eleventy

Start from a blank project and build up to an Eleventy site that includes a blog collection and is prepared to source content from a headless CMS. You'll also learn how to add Sass as the styling solution, complete with triggering 11ty to re-compile when the Sass changes.

These lessons will help explain key 11ty features and concepts to help you make the most of this amazing static site generator.

By the last lesson, you'll have learned how to:
- define custom `input` and `output` directories
- create a layout that accesses front matter variables
- watch for Sass changes and include CSS in the build proces
- create an 11ty collection using `tags`
- define front matter for an entire collection
- make and apply a filter to a collection
- generate pages from an external data source, such as a CMS or API

Build An Eleventy (11ty) Site From Scratch

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

In this video, you will learn to bootstrap an eleventy project.

we'll start from an empty directory, initialize it as an npm package, install `@11ty/eleventy` package and create the website entry point.

Eleventy can compile multiple file formats, HTML, markdown, liquid, and njk.

Check out the eleventy [docs](https://www.11ty.dev/docs/) for more information.

Bootstrap an eleventy project

In this video, you will learn how to use the eleventy layouts feature.
Eleventy Layouts are special templates that can be used to wrap other content.


for more information check the layouts [docs](https://www.11ty.dev/docs/layouts/)

Use eleventy layouts

In this video, you will learn how to use layout chaining with eleventy.
Layouts in eleventy can use other layouts. You can also use a different template engine across layouts. This is very handy if we want to wrap some pages with extra markup but not all the pages.


for more information check out the eleventy [docs](https://www.11ty.dev/docs/layout-chaining/)

Use Layout Chaining in eleventy

In this video, you will learn how to create pages from data in eleventy. a data source can be a JSON file or a js file.

for more information check out the eleventy [docs](https://www.11ty.dev/docs/pages-from-data/)

Create pages from data in eleventy

In this video, you will learn how to use the collection feature in eleventy.
Collections will allow to group content under one tag and loop through it in your template files

for more information check out the eleventy [docs](https://www.11ty.dev/docs/collections/)

Use Collections in eleventy

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

Begining from a brand new project, learn how to install Eleventy (11ty), and add `develop` and `build` scripts. Next, define a custom configuration to set preferred input and output directories. Then create a home page file and your first layout while learning how 11ty handles mixing templating languages.

Create an Eleventy (11ty) Site From Scratch

Learn how to add Sass to an Eleventy (11ty) project including directing 11ty to re-compile when Sass changes are made. This step involves adding two new functions to the `.eleventy.js` configuration: `addWatchTarget()` and `addPassthroughCopy()`. Then, define the link to the compiled CSS file within an 11ty layout.

Add Sass Compiling and Watch for Changes in Eleventy (11ty)

Create a blog directory with posts for your Eleventy (11ty) project, and learn how to define the posts as an 11ty collection using `tags`. Then make a blog index page and write a `for` loop with Nunjucks to output a list of each post linked to the post page.

Define an Eleventy (11ty) Collection to Create a Blog

Filters in Eleventy (11ty) are a way to mutate data including string variables or arrays such as collections. Learn to create a filter for use on a collection which will select a random item from the collection.

Apply a Filter to an Eleventy (11ty) Collection

Eleventy (11ty) is able to run any JavaScript or Node functions at build time. This makes it possible to source external data such as from a headless CMS or other API. Learn how to generate pages from data pulled from a mock CMS using the 11ty `pagination` method and designate the data as an 11ty collection. You'll also learn how to define variables for the page using `eleventyComputed`, and then write a `for` loop to output a link to each page.

Generate Eleventy (11ty) Pages From External Data

PM2 is a production process manager for Node.js applications with a built-in load balancer. It allows you to keep applications alive forever, to reload them without downtime and to facilitate common system admin tasks.

This video shows how to enable features in your pm2 config file that allow you to prevent runaway apps from bringing your server down. Setting max memory used, number of running processes allowed and maximum restart attempts are all covered.

Controlling runaway apps using pm2

In this video, you will learn how to pass environment variables to your node.js app using the pm2 config file. This is useful for setting options inside your app such as production or development.

Passing environment variables to node.js using pm2

In this video, learn how to automatically restart your node.js app using pm2 when the code for your app changes. You will also learn how to exclude files and directories from restarting your app (such as static assets, css, images, etc.).

Restarting your node.js app on code change using pm2

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

Topics

Instructors

Content Type