Hello @Adam Wright and Welcome to the GreenSock Forum!
Here is a link to the TweenMax from() Docs: https://greensock.com/docs/TweenMax/static.from()
So the from() method has 3 parameters.. specifically the target parameter:
TweenMax.from( target, duration, vars )
The target parameter
target: Object
Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll().
So just like @Visual-Q advised jQuery is not required. But keep in mind if using the load event you want to stay away from the onload event and use addEventListener("load") instead, since the window.onload event can wipe out previously binded load events on the window object.
Here is a quick way to make sure you only run your GSAP code after the window is fully loaded and the DOM is fully ready. Below you will see that I first make sure the DOM is ready, and then check if the window is loaded. This makes sure that the HTML or SVG markup is fully ready and that the window is checked within that DOM ready event handler. That is a great cross browser solution.
The reason being is that sometimes the window event can fire before your DOM is ready or vice versa. That happens due to slow networks and connectivity. This makes sure that the window event fires, even if it it fires before or after the DOM is ready. So if the window load fires after the DOM ready.. it will fire as expected. If the window fires before the DOM is ready, it will wait and fire immediately after the DOM ready event. So this way you cover your bases
The Vanilla JS way:
// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
// wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded
window.addEventListener("load", function() {
// GSAP custom code goes here
}, false);
});
The jQuery way:
// wait until DOM is ready
$(document).ready(function() {
// wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded
$(window).bind("load", function() {
// GSAP custom code goes here
});
});
Happy Tweening
