GSAP Web Development and Animation Mastery

Set up a CSS project by creating an index.html and an external style.css, and organizing folders for CSS and images to separate CSS from HTML.

Link the style.css to the index.html, set the body background to light gray with black text, and preview color changes (red) while exploring fonts, containers, and ids.

Learn how to design and style fonts with CSS by applying font-family, font-size, font-weight, and line-height within a container, and explore margins that affect text layout.

Explore CSS IDs and containers to target elements like box one and box two within a container, then apply width, margins, and styles such as gray background with white text.

Explore the CSS box model by adjusting margin, border, and padding for text blocks, and see how borders and headers can be styled.

Design and style web forms with CSS by building form groups, labels, inputs, and a textarea, then enhance usability with padding, borders, full-width fields, and a stylish submit button.

Learn how to create a fully operational css page by building an index.html, a css file, and a poster with a background image, while adding assets and implementing responsive styling.

Explore basic JavaScript data types, variables, and console statements, link HTML and JavaScript, and use console log, error, and warn with string methods like to uppercase and to lowercase.

Explore creating arrays and object literals in JavaScript, manipulate arrays with push, indexOf, and isArray, and work with json representing arrays of objects.

Master JavaScript loops and conditionals by writing for and while loops, exploring if and switch statements, using console.log, and understanding break behavior for clean code.

Explore functions and classes in JavaScript, including inputs, parameters, returns, and basic flow; create a person class with a constructor and getters for full name and birth year.

Learn to access HTML elements with JavaScript using id, query selector, and tag name, and connect scripts to a form to prepare for mouse and keyboard events.

Discover how gsap enables high-performance web animations and interactive experiences, and learn to set up a simple project with html, css, and javascript using the gsap library.

Create a simple GSAP animation by building a circle that changes color and moves along a path using HTML, CSS, and JavaScript, with a GSAP tween and elastic ease out.

Set up a new GSAP project by creating HTML, CSS, and JavaScript files from scratch, configuring a black background, a container div, and AutoCAD and JavaScript SVG logos.

See GSAP move a logo from left to right with a two-second duration and 300-pixel x translation, while the background color, border radius, and border appear.

Discover how gsap easing types govern bouncing by adjusting bouncing and progress, and experiment with normal, back, elastic, steps, cyclic, expo, and rough bounces in code.

Add a second object and animate it with the first using GSAP on both images. Size and center the images, then rotate both objects 360 degrees over 20 seconds.

learn how to animate the appearance of objects with GSAP, using from with duration, opacity, and scale, explore bounce effects, and practice applying parameters to multiple objects.

Create five circles and animate them with gsap from, using duration, opacity, and stagger for sequential appearance. Control their entry paths with random y values, producing varied, dynamic introductions.

Learn GSAP timeline animations for the logo and circles, using from and stagger effects with opacity, scale, and rotation, including a reference timeline and repeat behavior.

Design an interactive web page with GSAP, bringing leaves, cursor motion, and drawn text to life, while editing only the provided JavaScript for a dream project.

Design randomly movable leaves using gsap and javascript, control the leaves through a dedicated class, update mouse coordinates, and handle resize to keep animations responsive.

Explore how to make leaves on a webpage resize and reposition with the cursor using GSAP, grouping squares at the cursor and chaining tweens with timelines for dynamic interactivity.

Learn how to inline leaves on a webpage using gsap, making leaves follow the cursor with mouse x and y coordinates and disperse on movement.

Learn to create a cursor appearance with a red dot and a border circle that follow the mouse, using GSAP tweens and position updates.

Learn to draw an SVG on a website, animate vector paths with scrollmagic, control stroke dash offset and length, and create a handwriting-style header reveal.

Build a Flask back end with app.py and templates/home.html in PyCharm, and integrate GSAP to animate the page title from top to bottom.