Skip to content

Instantly share code, notes, and snippets.

@kevinrodbe
Created January 31, 2016 21:23
Show Gist options
  • Save kevinrodbe/0e4c45862afa4d978718 to your computer and use it in GitHub Desktop.
Save kevinrodbe/0e4c45862afa4d978718 to your computer and use it in GitHub Desktop.
The main-req.js file example by GreenSock
//NOTES:
//
// 1) If you're loading TweenMax, you could map all of the following to the TweenMax JS file since it
// contains them all (thus it'd save some kb): TweenLite, TimelineLite, TimelineMax, CSSPlugin,
// BezierPlugin, AttrPlugin, DirectionalRotationPlugin, and EasePack. For example,
// TweenLite: "./greensock/TweenMax". But we'll use each file independently below to show how.
//
// 2) If you're only loading TweenLite and/or TimelineLite and you want to animate CSS-related properties,
// you should also load CSSPlugin. If you're using TweenMax, it already contains CSSPlugin, TweenLite,
// TimelineLite, TimelineMax, EasePack, AttrPlugin, DirectionalRotationPlugin, and BezierPlugin.
//
// 3) Make sure you're using version 1.13.0 or later of the GSAP files.
require.config({
paths: {
TweenMax: "./greensock/TweenMax",
TweenLite: "./greensock/TweenLite",
CSSPlugin: "./greensock/plugins/CSSPlugin",
TimelineLite: "./greensock/TimelineLite",
TimelineMax: "./greensock/TimelineMax",
EasePack: "./greensock/easing/EasePack"
}
});
//we'll load CSSPlugin and EasePack just to make sure we can animate css properties and access the special eases, even though we don't need to directly reference those classes.
require(["TweenLite", "TimelineLite", "CSSPlugin", "EasePack"], function(TweenLite, TimelineLite) {
"use strict";
//a regular from() tween...
TweenLite.from("#headline", 1, {rotation:360, x:200, y:100, autoAlpha:0});
//a timeline...
var tl = new TimelineLite({delay:0.5});
tl.from("#paragraph", 1, {y:200, ease:"Back.easeOut", autoAlpha:0})
.from("#code", 1, {autoAlpha:0, scale:1.8, ease:"Bounce.easeOut", transformOrigin:"left center"})
.to("#headline", 1, {color:"#71b200"});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment