Created
April 10, 2017 16:40
-
-
Save cameronrye/418bb85f2e76b334facd11f4cb1aa524 to your computer and use it in GitHub Desktop.
GASP Resources
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Position parameters | |
var tl = new TimelineLite(); | |
tl.to(".orange", 1, {x:750}) | |
//this just follows the first | |
.to(".green", 1, {x:750}) | |
//there is a one second gap between these two tweens | |
.to(".blue", 1, {x:750}, "+=1") | |
//this goes to two seconds in | |
.to(".red", 1, {x:750}, "2") | |
// add a relative label at this part of the timeline | |
.add("newLabel") | |
// tween at 3 seconds past the relative label | |
.to(".purple", 1, {x:750}, "newlabel+=3"); | |
//------------------------------------------------------- | |
// Some Useful Timeline function calls | |
tl.pause(); // Pause timeline - within a timeline it would be var foo = new TimelineMax({paused:true});, very handy for getting a timeline ready for interaction. | |
tl.restart(); // Restart the timeline - very useful for interaction (set the timeline to paused:true, and then trigger restart) | |
tl.reverse(); // Reverse playback- nice for exiting a scene in interaction. | |
tl.seek(n); // Go to n seconds or 'label'- good for working because you don't have to sit through the whole animation. | |
tl.timeScale(n); // Speed up/slow down timeline by n seconds- use this for debugging to slow it down, or for faster playback in action | |
tl.globalTimeScale(n); // changes all of the timescales at once- useful for multiple timelines. | |
tl.progress(0.5); // Skip to halfway | |
tl.resume(); // Continue playback | |
tl.resume(n); // Continue playback at n seconds | |
tl.play(n); // Play from n seconds- funnily, less useful | |
tl.play(-n); // Play n seconds from end | |
// also options, usage: new TimelineMax({example}); | |
paused:true // boolean, default is false | |
yoyo:true // close to CSS animation direction: alternate- makes the timeline go back and forth. | |
repeat:n // iteration count | |
delay:n // delay of the whole timeline | |
repeatDelay:n // delay in between iteration | |
//------------------------------------------------------- | |
// DrawSVG | |
// Use percentage, absolute values, or boolean | |
drawSVG: true // full stroke drawn | |
drawSVG:"100%" // same as true | |
drawSVG: "10%" // the first 10% | |
drawSVG: "10% 90%" // the first 10% to the last 90% | |
drawSVG: "50% 50%" // looks like nothing because both ends at 50% | |
drawSVG:"20 350" // the first 20px and 350px | |
//------------------------------------------------------- | |
// SplitText | |
// creates an array (can use mySplitText.chars, in the case below, foo.chars), also wraps all in divs | |
var foo = new SplitText("#bar", { | |
type: "words, chars, lines", | |
//optional- may animate better, may cause text reflow to be less natural | |
position: "absolute", | |
//optional | |
wordsClass:"foobar" | |
}); | |
// use in GSAP animation: | |
tl.staggerFrom(mySplitText.chars, 0.8, {opacity:0, scaleX:0, ease:Power4.easeOut}, 0.05, "+=4"); | |
//------------------------------------------------------- | |
// MorphSVG | |
// You may need to convert the shape data to a path before you begin working | |
MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline"); | |
TweenLite.to("#initial", 1, {morphSVG:"#next"}); //first shape tween | |
TweenLite.to("#initial", 1, {morphSVG:"#second"}); //the second shape tween. Notice that we don't use #next, we continue to tween from the initial shape. | |
TweenLite.to(“#polygon”, 2, {morphSVG:"240,220 240,70 70,70 70,220"}); //use a shape instead of an idea | |
TweenLite.to(“#path”, 2, {morphSVG:"M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10"}); //use a path instead of an ID | |
// Load shapeIndex to check out the optimal shape tween https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js, it will start up a GUI | |
// this plugin is smart and will use a repeat:-1 to continually show the tween so you can use the GUI. | |
// use an existing ID | |
findShapeIndex("#square", "#star"); | |
// or use path data | |
findShapeIndex("#square", "M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10"); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment