Skip to content

Instantly share code, notes, and snippets.

@cameronrye
Created April 10, 2017 16:40
Show Gist options
  • Save cameronrye/418bb85f2e76b334facd11f4cb1aa524 to your computer and use it in GitHub Desktop.
Save cameronrye/418bb85f2e76b334facd11f4cb1aa524 to your computer and use it in GitHub Desktop.
GASP Resources
// 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