Jump to content

Search the Community

Showing results for tags 'gsap'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Upgrading your project from using GSAP 2 to GSAP 3? It's easy. Most legacy code is already 100% compatible, but there are a few key differences to keep in mind. This guide will help move from GSAP 1.x/2.x to the all-new (and very exciting) GSAP 3. Quick links: New Tween/Timeline Syntax Duration Easing Staggers Overwriting Plugins Cycle Ticker Defaults Callback scope ThrowPropsPlugin renamed InertiaPlugin Other things to keep in mind Frequently Asked Questions More information New Tween/Timeline Syntax (optional) The old syntax still works, but technically you never need to reference TweenMax, TweenLite, TimelineMax or TimelineLite anymore because they're all simplified into a single gsap object! // old TweenMax.to(".class", 2, {x: 100}); // new gsap.to(".class", {duration: 2, x: 100}); // -- Timelines -- // old var tl = new TimelineMax(); // new var tl = gsap.timeline(); Notice there's no "new" keyword needed to create the timeline. Internally, there's one "Tween" class (replaces TweenLite/TweenMax) and one "Timeline" class (replaces TimelineLite/TimelineMax), and both have all of the features like repeat, yoyo, etc. When you call one of the gsap methods like .to(), .from(), etc., it returns an instance of the appropriate class with easily chainable methods. You never need to wonder which flavor (Lite/Max) you need. So for the vast majority of your code, you could simply replace TweenLite and TweenMax with "gsap". You could also do a search/replace for "new TimelineLite(" and "new TimelineMax(", replacing them with "gsap.timeline(" (notice we left off the closing ")" so that any vars objects are retained, like if you had "new TimelineMax({repeat:-1})" it'd keep the repeat). Duration (optional) You can still define a tween's duration as the 2nd parameter, but in GSAP 3 we encourage you to define it inside the vars object instead because it's more readable, it fits with the new keyframes feature, and can be function-based: // old TweenMax.to(obj, 1.5, {...}); TweenMax.from(obj, 1.5, {...}); TweenMax.fromTo(obj, 1.5, {...}, {...}); // new gsap.to(obj, {duration: 1.5, ...}); gsap.from(obj, {duration: 1.5, ...}); gsap.fromTo(obj, {...}, {duration: 1.5, ...}); Easing (optional) The old eases still work great, but you can switch to the new, more compact ease format that requires less typing, is more readable, and eliminates import hassles. Simply include the ease name (all lowercase) followed by a dot and then the type (".in", ".out", or ".inOut"). Note that .out is the default so you can omit that completely. // old ease: Power3.easeInOut ease: Sine.easeOut ease: Linear.easeNone ease: Elastic.easeOut.config(1, 0.5) ease: SteppedEase.config(5); // new ease: "power3.inOut" ease: "sine" // the default is .out ease: "none" // shortened keyword ease: "elastic(1, 0.5)" ease: "steps(5)" Notice that for eases that support additional inputs, simply put them within some parenthesis at the end: // old ease: Elastic.easeOut.config(1, 0.3) ease: Elastic.easeIn.config(1, 0.3) // new ease: "elastic(1, 0.3)" // the default is .out ease: "elastic.in(1, 0.3)" RoughEase, SlowMo, and ExpoScaleEase are not included in the core GSAP file - they're in an external EasePack file. We highly recommend using our Ease Visualizer to get the exact ease that you want and easily copy the correct formatting. Staggers (optional) The old stagger methods still exist for legacy code, but GSAP 3 supports staggers in ANY tween! Simply use the stagger property within the vars parameter. // old TweenMax.staggerTo(obj, 0.5, {...}, 0.1); // new // Simple stagger gsap.to(obj, {..., stagger: 0.1}); // Complex stagger gsap.to(obj, {..., stagger: { each: 0.1, from: "center" grid: "auto" }}); Caveat: the old TweenMax.stagger* methods returned an Array of tweens but the GSAP 3 legacy version returns a Timeline instead. So if you have code that depends on an array being returned, you'll need to adjust your code. You can use getChildren() method of the resulting timeline to get an array of nested tweens. Handling repeats and onComplete: if you add a repeat (like repeat: -1) to a staggered tween, it will wait until all the sub-tweens finish BEFORE repeating the entire sequence which can be quite handy but if you prefer to have each individual sub-tween repeat independently, just nest the repeat INSIDE the stagger object, like stagger: {each: 0.1, repeat: -1}. The same goes for yoyo and onComplete. To learn more about staggers, check out this article. See the Pen Staggers demo by GreenSock (@GreenSock) on CodePen. Overwriting Prior to GSAP 3, the default overwrite mode was "auto" which analyzes the tweens of the same target that are currently active/running and only overwrites individual properties that overlap/conflict, but in GSAP 3 the default mode is false meaning it won't check for any conflicts or apply any overwriting. Why? The overwrite behavior sometimes confused people, plus it required extra processing. We wanted to streamline things in GSAP 3 and make overwriting behavior an opt-in choice. To get the GSAP 1.x/2.x behavior, simply do this once: // set the default overwrite mode to "auto", like it was in GSAP 1.x/2.x gsap.defaults({overwrite: "auto"}); Of course you can set overwrite on a per-tween basis too (in the vars object). Also note that there were more overwrite modes in GSAP 1.x/2.x (like "concurrent", "preexisting" and "allOnStart") that have been eliminated in GSAP 3 to streamline things. Now the only options are "auto" (isolates only specific overlapping/conflicting properties), false (no overwriting), or true (when the tween starts, it immediately kills all other tweens of the same target regardless of which properties are being animated). onOverwrite was removed in favor of a new onInterrupt callback that fires if/when the tween is killed before it completes. This could happen because its kill() method is called or due to overwriting. Plugins Loading plugins Similar to the old TweenMax, some plugins are already included in GSAP's core so that they don't need to be loaded separately. These are called core plugins and include AttrPlugin, CSSPlugin, ModifiersPlugin, and SnapPlugin. RoundPropsPlugin is also included for legacy code, but it has been replaced by the more flexible SnapPlugin. Other plugins, such as Draggable, MotionPathPlugin, MorphSVGPlugin, etc. need to be loaded separately and registered using gsap.registerPlugin(). We recommend using the GSAP Installation Helper to get sample code showing how to load and register each file. // register plugins (list as many as you'd like) gsap.registerPlugin(MotionPathPlugin, TextPlugin, MorphSVGPlugin); MotionPathPlugin replaces BezierPlugin GSAP's new MotionPathPlugin is essentially a better, more flexible version of the older BezierPlugin. In most cases, you can just change bezier legacy references to motionPath: // old bezier: [{x:200, y:100}, {x:400, y:0}, {x:300, y:200}] // new motionPath: [{x:200, y:100}, {x:400, y:0}, {x:300, y:200}] Keep in mind that MotionPathPlugin also supports SVG paths! If you're having trouble converting your bezier curve to a motion path, feel free to post in our forums. See the Pen MotionPathPlugin demo by GreenSock (@GreenSock) on CodePen. The old type: "soft" of BezierPlugin isn't available directly in MotionPathPlugin (it was rarely used), but there's a helper function in this forums post that'll deliver identical results. className tweens removed Support for class name tweens has been removed since they're not very performant, they're less clear, and required an uncomfortable amount of kb. Plus they were rarely used. Just use regular tweens instead that explicitly animate each property. For example if you had this CSS: .box { width: 100px; height: 100px; background-color: green; } .box.active { background-color: red; } You could use this JavaScript: // old .to(".class", 0.5, {className: "+=active"}) // new .to(".class", {backgroundColor: "red"}) // if you need to add a class name in the end, you could do this instead: .to(".class", {backgroundColor: "red", onComplete: function() { this.targets().forEach(elem => elem.classList.add("active")); }}) ColorPropsPlugin unnecessary GSAP 3 has improved support for animating color values built into GSAP's core. As such, the old ColorPropsPlugin isn’t necessary. Simply animate the color values directly as needed! // old TweenMax.to(myObject, 0.5, {colorProps: {borderColor: "rgb(204,51,0)"} }); // new gsap.to(myObject, {borderColor: "rgb(204,51,0)", duration:0.5}); skewType eliminated GSAP 3 removed skewType and CSSPlugin.defaultSkewType because they were rarely used and we wanted to conserve file size. If you still need this functionality, feel free to use the compensatedSkew helper function. suffixMap CSSPlugin.suffixMap has been replaced by setting the units inside of gsap.config() like: // old CSSPlugin.suffixMap.left = "%"; // new gsap.config({units: {"left": "%"}}) Cycle GSAP 2.x stagger methods had a special cycle property that'd allow function-based values or arrays whose values would be cycled through, but GSAP 3 replaces this with a new even more flexible gsap.utils.wrap() utility that can be used in ANY tween, not just staggers! // old TweenMax.staggerTo(".class", 0.5, {cycle: {x: [-100, 100]}}, 0.1) // new gsap.to(".class", {x: gsap.utils.wrap([-100, 100]), stagger: 0.1}) See the Pen GSAP 3 wrap() and wrapYoyo() utilities demo by GreenSock ( @GreenSock) on CodePen. Ticker If you want a function to run every time that GSAP updates (typically every requestAnimationFrame), simply add a listener to gsap.ticker with the new, simpler syntax: // old TweenLite.ticker.addEventListener("tick", myFunction); TweenLite.ticker.removeEventListener("tick", myFunction); // new gsap.ticker.add(myFunction); gsap.ticker.remove(myFunction); Note that there is no .useRAF() function. GSAP 3 always uses requestAnimationFrame unless it is not supported, in which case it falls back to setTimeout. Defaults Setting global defaults has been greatly simplified in GSAP 3. Instead of having static defaults (like TweenLite.defaultEase, TweenLite.defaultOverwrite, CSSPlugin.defaultTransformPerspective, and CSSPlugin.defaultSmoothOrigin), there is now one simple method where you can set all of these defaults: gsap.defaults(). gsap.defaults({ ease: "power2.in", overwrite: "auto", smoothOrigin: false, transformPerspective: 500, duration: 1 }); You can also set defaults for each timeline instance which will be inherited by child tweens: var tl = gsap.timeline({defaults: { ease: "power2.in", duration: 1 } }); // now tweens created using tl.to(), tl.from(), and tl.fromTo() will use the // above values as defaults Other configuration values that aren't tween-specific can be set using gsap.config() including what was formerly set using properties like TweenLite.autoSleep and CSSPlugin.defaultForce3D. gsap.config({ autoSleep: 60, force3D: false, nullTargetWarn: false, units: {left: "%", top: "%", rotation: "rad"} }); Callback scope In GSAP 3 scoping has been simplified. There is no more "scope" parameter in various methods like timeline's call() method, and no more onUpdateScope, onStartScope, onCompleteScope, or onReverseCompleteScope. Instead, use callbackScope to set the scope of all of the callback scopes of a particular tween/timeline or use .bind to set the scope of particular callbacks: // old TweenMax.to(obj, 0.5, {..., onCompleteScope: anotherObj, onComplete: function() { console.log(this); // logs anotherObj }}); // new gsap.to(obj, {..., callbackScope: anotherObj, onComplete: function() { console.log(this); // logs anotherObj } }); // or gsap.to(obj, {..., onComplete: function() { console.log(this); // logs anotherObj }.bind(anotherObj) }); You can access the tween itself by using this inside of the callback. In GSAP 1.x/2.x, you could reference a special "{self}" value in onCompleteParams, for example, but that's no longer valid because the callback is scoped to the tween instance itself by default. So, for example, you can get the tween's targets by using this.targets(). For example: // old TweenMax.to(obj, 0.5, {onComplete: function() { console.log(this.target); }}); // new gsap.to(obj, {onComplete: function() { console.log(this.targets()); // an array }}); If this.targets is undefined, it's probably because you're using an arrow function which always locks its scope to where the arrow function was originally declared. If you want "this" to refer to the tween instance, just use a normal function instead of an arrow function. gsap.to(".class", { // BE CAREFUL! Arrow functions lock scope to where they were created, so "this" won't refer to the tween instance here! // Use normal functions if you need "this" to refer to the tween instance. onComplete: () => console.log(this.targets()) // will not work }); If you prefer using arrow functions (to lock scope to your object/context) and need to reference the tween instance in your callback, you could use this helper function: // this function will always push the tween instance into the parameters for you and allow you to define a scope. function callback(func, scope, params) { let tween; params = params || []; return function() { if (!tween) { tween = this; params.push(tween); } func.apply(scope || tween, params); }; } And then you could use it like this: gsap.to(... { onComplete: callback(tween => { console.log(this); // since this is an arrow function, scope is locked anyway so this is your class instance console.log(tween); // tween instance }) }); ThrowPropsPlugin renamed InertiaPlugin ThrowPropsPlugin has been renamed InertiaPlugin and has some new features. Other things to keep in mind Transforms We recommend setting all transform-related values via GSAP to maximize performance and avoid rotational and unit ambiguities. However, since it's relatively common for developers to set a value like transform: translate(-50%, -50%) in their CSS and the browser always reports those values in pixels, GSAP senses when the x/y translations are exactly -50% in pixels and sets xPercent or yPercent as a convenience in order to keep things centered. If you want to set things differently, again, just make sure you're doing so directly through GSAP, like gsap.set("#id", {xPercent:0, x:100, yPercent:0, y:50}). Getting an object's properties In GSAP 1.x/2.x, it was relatively common for developers to access an element's transform-specific properties via the undocumented _gsTransform object but in GSAP 3 it's much easier. gsap.getProperty() lets you get any property, including transforms. There is no more _gsTransform. // old element._gsTransform.x // new gsap.getProperty(element, "x") Referring to the core classes If you need to refer to the core Tween or Timeline class, you can do so by referencing gsap.core.Tween and gsap.core.Timeline. timeScale() and reversed() In GSAP 3 the timeScale controls the direction of playback, so setting it to a negative number makes the animation play backwards. That means it is intuitively linked with the reversed() method. If, for example, timeScale is 0.5 and then you call reverse() it will be set to -0.5. In GSAP 2 and earlier, the "reversed" state of the animation was completely independent from timeScale (which wasn't allowed to be negative). So in GSAP 3, you could even animate timeScale from positive to negative and back again! Removed methods/properties TweenLite.selector - There's no more TweenLite.selector or TweenMax.selector (it's pointless with document.querySelectorAll() that's in browsers now). timeline.addCallback() - dropped in favor of the simpler .call() method. TweenMax's pauseAll(), resumeAll(), killAll(), and globalTimeScale() - dropped in favor of directly accessing methods on the globalTimeline, like: gsap.globalTimeline.pause(); gsap.globalTimeline.resume(); gsap.globalTimeline.clear(); // like killAll() gsap.globalTimeline.timeScale(0.5); Frequently Asked Questions (FAQ) Why migrate to GSAP 3? GSAP 3 is almost half the file size of the old TweenMax, has 50+ more features, and has a simpler API. See the "Top 5 Features of GSAP 3" article for more information. Do I have to use the new syntax? We highly recommend that you use the new syntax, but no, it's not imperative. Most old GSAP syntax will work just fine in GSAP 3. We're pretty confident that you'll love the new syntax once you're used to it! Will GSAP 2.x be actively maintained for years? We'll certainly answer questions in the forums and help users of GSAP 2.x, but we're focusing all of our development resources on the more modern 3.x moving forward so don't expect any additional 2.x releases in the future. My production build isn't working with GSAP 3. Why? Usually this just means that your build tool is applying tree shaking and dumping plugins - that's why you need to register your plugins with gsap.registerPlugin(). We recommend that you use the Installation Helper which gives you code for proper registration as well. I am seeing some odd/unexpected behavior but don't have any errors. What's going on? Try setting gsap.defaults({overwrite: "auto"}) and see if that fixes the issue. If it does, you must have created some conflicting tweens. You could either keep the default overwrite value of "auto" or restructure your animation to avoid the conflict. If that doesn't fix the issue, please post in our forums and we'd be happy to help! More information For a deep dive into the nitty-gritty of GSAP 3, check out the GSAP 3 Release Notes. As always, if you have questions or are having trouble our forums are available to help you!
  2. Hi, I wander how can I make the delay prop work every time I call .play() method. I also tried to chain the .delay(s) method like tween.delay(1).play() but it did't work. ☹️ Someone more experienced can help me pls? Thanks
  3. GreenSock

    GSAP 3.1 Released

    GSAP 3.1 has landed with some exciting new features and various bug fixes. We highly recommend updating at your earliest convenience. Here are a few highlights: Random staggers GSAP’s staggers get even more powerful. Use the new from: “random” option to randomize how the staggers get applied. See the Pen GSAP from: "random" stagger by GreenSock (@GreenSock) on CodePen. Learn more about the advanced staggering options available in GSAP 3 below. See the Pen GSAP 3.0 Stagger demo by GreenSock (@GreenSock) on CodePen. shuffle() any Array The new shuffle() utility method randomly shuffles the contents of any Array (in place). var array = [1, 2, 3, 4, 5]; gsap.utils.shuffle(array); // returns the same array, but shuffled like [2, 5, 3, 1, 4] Timelines can now repeatRefresh Now timelines support repeatRefresh which makes all child tweens invalidate() and get refreshed when the timeline repeats, meaning their start and end values get re-calculated. It’s most useful for relative, random, or function-based values. For example, if a tween has a value like x: “random(-100, 100)”, each time the timeline repeats x would go to a new random value. See the Pen GSAP repeatRefresh on Timelines by GreenSock (@GreenSock) on CodePen. repeatRefresh skips yoyo’s It seemed a little odd to refresh the values when going in reverse, so now repeatRefresh won’t get triggered for the yoyo phase of the animation. See the Pen GSAP repeatRefresh with yoyo demo by GreenSock (@GreenSock) on CodePen. Smooth handling of complex borderRadius, borderWidth, margin, and padding values GSAP 3.1 accommodates not only simple values like borderRadius: “50%” but also more complex ones like borderRadius: “20px 50% 40px 15px” or borderRadius: “50% 20%” and it animates between them smoothly. The same goes for borderWidth, margin, and padding which can have complex values (top, right, bottom, and left). It will also return complex values correctly via gsap.getProperty(). Plus GSAP works around a Firefox bug that mis-reports certain values like borderRadius. Download today! There are many ways to get GSAP 3.1 - see the Installation page for all the options (download, NPM, zip, etc.) Resources GSAP 3.1.0 full release notes on Github Full documentation Getting started with GSAP Learning resources Community forums Happy tweening!
  4. Hi, I have a spin to wheel animation which I found elsewhere on this forum. My use case is a bit different though as I would like to keep the wheel spinning while I make a request to a server which will tell me which slice the animation should land on and then manually stop the wheel but slowly. The issue is my animations end up being choppy since I am changing the easing functions. Any tips anyone might have to make this work smoothly would really be appreciated.
  5. I am creating a drag & drop exercise. When the user is done dragging, the dragged object should automatically animate to its target. This works correctly in normal circumstances. However, when the parent container is scaled, the calculation for determining the target position does not work and the dragged object does not land correctly on the target. I thought it might be related to dragging using x and y, so I changed the code to use left and top. I still have the same issue. You can see the issue in the CodePen. The viewport container element automatically resizes to fit the browser window/frame. Note that I use a function called getDocumentRelativePosition (which can be seen in the CodePen) to determine the left and top values of elements, because in practice, the dragged object can be inside a different relative container than the target object. Any ideas?
  6. Hello, In the learning process of React + GSAP and I've run into a situation where I can't find the easy solution. Should be a quick answer In previous projects, (javascript + html for example) I would write up a timeline, then set an array of elements with a { clearProps: "all" } to essentially reset it The code I'm working with now is React with inline styles. It seems that clearing the props in the same fashion removes all of the inline styles, and since it's not set in a css sheet, the animation doesn't reset but breaks and it seems this is working as intended. Is there a recommended way to approach resetting inline styles in react? Or should I start pushing to refactor all of the code into css files? Thanks for any of your time!
  7. Hello Here are different versions of gsap. when gsap 2.0.2 is used text is text hover effect is showing correctly, https://codepen.io/Sarvarkhuja/pen/dyPjPVg However, when i update gsap version to 3.0.5, opacity of text is being set to 0 https://codepen.io/Sarvarkhuja/pen/ExadQjw I would appreciate any help to get the same result in the latest gsap version regards
  8. Hi, I have created a gsap animation in my website. Inorder for it to autoplay i have not specified the duration while creating the scrollmagic scene. Now the animation is autoplaying (which is the intended effect if was going for) but now the section stays locked in place since there is no duration to tell the animation that it is over. So currently, the next elements are being overlapped by the pinned element. How can i fix this ? How can i unpin the element after the animation ?
  9. Hi all, I have a client who has a Business membership and they host the files on their own CDN. Unfortunately, they never update the versions. TimelineMax is v1.20.3 and MorphSVGPlugin is v0.8.11 I've requested they update the files, and they say they will, but this is a HUGE tech corporation with a HUGE tech bureaucracy and nothing is ever quick! So my question is -- how do I register a plugin (and use it) in this version? The plugin file does not expose window.MorphSVGPlugin so there's no apparent way to register it as it is undefined. This is my code as it stands: var tl = gsap.timeline(), circle = document.getElementById("circle"), smoke = document.getElementById("smoke-1"); tl.to(circle, 4, {morphSVG:smoke, type:"rotational", origin:"center center"}, "+=2") .to(circle, 4, {morphSVG:circle, type:"rotational", origin:"center center"}, "+=5"); Running it produces a console message to registerPlugin() thanks!
  10. I am trying to make a simple overlay transition effect with barba and gsap. when I click on the Page 02 link the overlay transition effect move across the page from left to right but the page did not change, I will have to click on the link the second time for the page to change how can I fix this thanks. Barba.Pjax.start(); var FadeTransition = Barba.BaseTransition.extend({ start: function() { Promise .all([this.newContainerLoading, this.fadeOut()]) .then(this.fadeIn.bind(this)); }, fadeOut: function() { const TransitionPromise = new Promise(function(resolve){ const OutTransition = new TimelineMax(); OutTransition // .set(".cover", {display:"block", y:"100%"}) .to(".cover", 0.5, {width: "100%", ease: Power2.easeOut}) .to(".cover", 0.5, {width: "0", left:"100%", ease: Power2.easeOut}) //.set(".cover", {display:"none"}); }); return TransitionPromise; }, fadeIn: function() { let _this = this; //TweenLite.set(this.oldContainer, {display:"none"}); TweenLite.to(this.newContainer, 0.1, {opacity:1, onComplete:function(){ _this.done(); } }); } }); Barba.Pjax.getTransition = function() { return FadeTransition; };
  11. Hi, Anyone got any ideas as to why this doesn't work? CSS version is correct, GSAP is not. z:200 is not doing anything? gsap.to(box1, { duration: 2, x: 200, z: 200, // Not working?? rotationY: 360, backgroundColor: "#000000", color: "#FFFFFF" }); Thanks D
  12. GreenSock


    Note: TimelineLite has been deprecated in GSAP 3 (but GSAP 3 is still compatible with TimelineLite). We highly recommend using the gsap.timeline() object instead. While GSAP 3 is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. You can think of a TimelineLite instance like a container where you place tweens (or other timelines) over the course of time. build sequences easily by adding tweens with methods like to(), from(), staggerFrom(), add(), and more. tweens can overlap as much as you want and you have complete control over where they get placed on the timeline. add labels, play(), stop(), seek(), restart(), and even reverse() smoothly anytime. nest timelines within timelines as deeply as you want. set the progress of the timeline using its progress() method. For example, to skip to the halfway point, set myTimeline.progress(0.5); tween the time() or progress() values to fastforward/rewind the timeline. You could even attach a slider to one of these properties to give the user the ability to drag forwards/backwards through the timeline. speed up or slow down the entire timeline using timeScale(). You can even tween this property to gradually speed up or slow down. add onComplete, onStart, onUpdate, and/or onReverseComplete callbacks using the constructor’s vars object. use the powerful add() method to add labels, callbacks, tweens and timelines to a timeline. base the timing on frames instead of seconds if you prefer. Please note, however, that the timeline’s timing mode dictates its childrens’ timing mode as well. kill the tweens of a particular object with killTweensOf() or get the tweens of an object with getTweensOf() or get all the tweens/timelines in the timeline with getChildren() If you need even more features like, repeat(), repeatDelay(), yoyo(), currentLabel(), getLabelsArray(), getLabelAfter(), getLabelBefore(), getActive(), tweenTo() and more, check out TimelineMax which extends TimelineLite. Sample Code //instantiate a TimelineLite var tl = new TimelineLite(); //add a from() tween at the beginning of the timline tl.from(head, 0.5, {left:100, opacity:0}); //add another tween immediately after tl.from(subhead, 0.5, {left:-100, opacity:0}); //use position parameter "+=0.5" to schedule next tween 0.5 seconds after previous tweens end tl.from(feature, 0.5, {scale:.5, autoAlpha:0}, "+=0.5"); //use position parameter "-=0.5" to schedule next tween 0.25 seconds before previous tweens end. //great for overlapping tl.from(description, 0.5, {left:100, autoAlpha:0}, "-=0.25"); //add a label 0.5 seconds later to mark the placement of the next tween tl.add("stagger", "+=0.5") //to jump to this label use: tl.play("stagger"); //stagger the animation of all icons with 0.1s between each tween's start time //this tween is added tl.staggerFrom(icons, 0.2, {scale:0, autoAlpha:0}, 0.1, "stagger"); Demo See the Pen TimelineLite Control : new GS.com by GreenSock (@GreenSock) on CodePen. Watch The video below will walk you through the types of problems TimelineLite solves and illustrate the flexibility and power of our core sequencing tool. Learn more in the TimelineLite docs. For even more sequencing power and control take a look at TimelineMax.
  13. Hello everyone here! I am planning to make custom free unofficial plugin for GSAP (it would be nice to make official plugin). But my only problem is where do I start? There's no documentation on how to make own/custom plugin for GSAP. I would like to make some free custom plugin for GSAP for the purpose to extend the abilities and powers of GSAP. I already create a repo for my plugin project for GSAP and I am inviting you guys to contribute! Any suggestions would be great! Calling for @Jack, @Carl and @Jonathan (They are GSAP legends) Github Repository: https://github.com/WarenGonzaga/AnimateCSSPlugin Best Regards, Waren
  14. Have you ever noticed an annoying "flash of unstyled content" (FOUC) when a web page first loads? That happens because browsers render things as quickly as possible, often BEFORE your JavaScript executes the first time. So what if some of your initial styles are set via JavaScript...like with GSAP? Solution: apply visibility: hidden; to your elements in CSS and then use GSAP's autoAlpha property to show it (or animate it in) when the page loads. autoAlpha affects opacity and visibility, changing it to visible when the opacity is greater than 0. Pretty convenient! Check out this video from the "GSAP 3 Express" course by Snorkl.tv - one of the best ways to learn the basics of GSAP 3: To make sure it works in browsers that don't have JavaScript enabled, you can undo the hiding inside of <noscript> tags.
  15. Hi everyone, Please i need to know if Dynamic (feed driven) Google DoubleClick banners can be hand coded and not created using Google Web Designer. If so does anyone have any base templates to start from. I hand code everything using GSAP and i just want to inject the data using Javascript and not be tied down to Google Web Designer. I am willing to pay for Live Online training for someone who can help me with this or even doing builds in Google Web Designer and adding custom code. Any help would be much appreciated. Thanks Brad
  16. I am trying to transition between 2 <section> elements which is not working correctly. All my other code works great, it's just this gsap part giving me grief. I am passing the fromSection and toSection into a function see below, I am wanting the fromSection to fade away and hide the element, then show the toSection with elastic ease. The issue seems to be with the hide() not being applied on each onComplete and the new section with display:none still active. Any help would be appreciated.
  17. Hello sorry for asking I am new to GSAP and JS. How can I stop fullpage.js from scrolling if my animation is not complete Please help. Thank you. P.S: I am using TimelineMax.
  18. I'm trying to make animation like this. First of all, i wanna create smooth move of green div like in example. Here is my try : https://codepen.io/eugenedrvnk/pen/VwwqaBp If compare my and example's animation, in example it's more smoothly. How can i make my anim more similar to an example?
  19. Hi, I've been using GSAP 2 for around 2 months for now. By using the knowledge I have I've created some basic animations using it. Now that the GSAP3 has arrived every thing looks a tini-tiny bit difficult.(but can be achieved) I know its new and i also know this is the only place i can get support. My problem is as follows, I have used Tweenmax and scroll magic to create a basic effect. Now that Tweenmax has been merged in GSAP core I cannot use the `.setTween(t1)`. As we have to Specify the animation at first in the Tweenmax and call them later using setTween. How can I achieve it in GSAP3 One more important thing as you can see the page scroll is smooth on the page. A friend of mine has given me the script to implement in the page that will make the page scroll smooth. Now i have lost contact with him. I wonder If someone could re code the script for me. I would be more than thankful Here is the codepen link for my example: https://codepen.io/Wahed98666/pen/MWWBmWa Thanks in advance
  20. Note: This plugin was removed from GSAP 3. However, you can register this unofficial plugin to get the effect back. Tweens any rotation-related property to another value in a particular direction which can be either clockwise ("_cw" suffix), counter-clockwise ("_ccw" suffix), or in the shortest direction ("_short" suffix) in which case the plugin chooses the direction for you based on the shortest path. For example: //obj.rotation starts at 45 var obj = {rotation:45}; // In GSAP 3 directionalRotation is built in): //tweens to the 270 position in a clockwise direction gsap.to(obj, {duration: 1, directionalRotation: {rotation: "270_cw"}}); //tweens to the 270 position in a counter-clockwise direction gsap.to(obj, {duration: 1, directionalRotation: {rotation: "270_ccw"}}); //tweens to the 270 position in the shortest direction (which, in this case, is counter-clockwise) gsap.to(obj, {duration: 1, directionalRotation: {rotation:"270_short"}}); // In GSAP 2 (directionRotation is an external plugin): //tweens to the 270 position in a clockwise direction TweenLite.to(obj, 1, {directionalRotation:"270_cw"}); //tweens to the 270 position in a counter-clockwise direction TweenLite.to(obj, 1, {directionalRotation:"270_ccw"}); //tweens to the 270 position in the shortest direction (which, in this case, is counter-clockwise) TweenLite.to(obj, 1, {directionalRotation:"270_short"}); We used rotation here but it could be anything, like newRot.x. Notice that the value is in quotes, thus a string with a particular suffix indicating the direction ("_cw", "_ccw", or "_short"). You can also use the "+=" or "-=" prefix to indicate relative values.
  21. GreenSock


    Tweens special EaselJS-related properties for things like saturation, contrast, tint, colorize, brightness, exposure, and hue which leverage EaselJS's ColorFilter and ColorMatrixFilter (see http://www.createjs.com/#!/EaselJS for more information about EaselJS). Of course you don't need the plugin to tween normal numeric properties of EaselJS objects (like x and y), but some filters or effects require special manipulation which is what EaselPlugin is for. Currently it only handles special properties related to ColorFilter and ColorMatrixFilter, and it can tween the "frame" property of a MovieClip. GreenSock's EaselPlugin exposes convenient properties that aren't a part of EaselJS's API like "tint", "tintAmount", "exposure", and "brightness" for ColorFilter, as well as "saturation", "hue", "contrast", "colorize", and "colorizeAmount" for ColorMatrixFilter. Learn more in the EaselPlugin documentation.
  22. Note: This plugin was removed from GSAP 3. Please see the GSAP 3 release notes for details. Tweens any color-related property of any object, like myObject.borderColor from "rgb(255,0,51)" to "rgb(102,204,0)" (and you can define the initial color in almost any format like "#FF00CC" or "rgba(255,0,51,0.5)" or "red" or "#f0c" or 0xFF00CC or "hsl(105,50%,80%)"). New values are always set in the format "rgb(...)" (or rgba(...) for values that include alpha). You can tween an unlimited number of color properties simultaneously. Just use the associated property name inside the colorProps:{} object like this: //tweens myObject.borderColor and myObject.myCustomProp TweenLite.to(myObject, 1, {colorProps:{borderColor:"red", myCustomProp:"rgb(204,51,0)"}, ease:Linear.easeNone}); ColorPropsPlugin is NOT generally intended to be used with css-related color properties because the CSSPlugin already handles those. ColorPropsPlugin is meant to tween other color-related properties directly on your JavaScript object(s). To learn more read the ColorPropsPlugin documentation.
  23. GreenSock


    Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Enables TweenLite and TweenMax to animate properties of Raphael JavaScript objects (see http://www.raphaeljs.com/). Raphael is a JavaScript framework that simplifies work with vector graphics on the web. For example: // creates canvas 550 × 400 at 10, 50 var paper = Raphael(10, 50, 550, 400); // creates rectangle at x = 50, y = 40, with a width of 200 and height of 100 var rect = paper.rect(50, 40, 200, 100); // sets the fill attribute of the rectangle to red (#f00) rect.attr("fill", "#f00"); // tween the fill to blue (#00f) and x to 100, y to 100, width to 100 and height to 50 over the course of 3 seconds using an ease of Power1.easeInOut TweenLite.to(rect, 3, {raphael:{fill:"#00f", x:100, y:100, width:100, height:50}, ease:Power1.easeInOut}); You can tween any of the properties that you would normally set using raphael's attr() method as well as the following transformation properties: rotation, scaleX, scaleY, skewX, skewY, tx and ty and even shortRotation which will rotate in the shortest direction to the destination value. tx and ty refer to the translation x and y properties (e and f from the element's matrix). This gives you a lot of control, even beyond what's easily accomplished through Raphael's own methods. Learn more in the RaphaelPlugin documentation.
  24. GreenSock


    Note: TimelineMax has been deprecated in GSAP 3 (but GSAP 3 is still compatible with TimelineMax). We highly recommend using the gsap.timeline() object instead. While GSAP 3 is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. TimelineMax extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() (and probably more in the future). It is the ultimate sequencing tool that acts like a container for tweens and other timelines, making it simple to control them as a whole and precisely manage their timing. Its easy to make complex sequences repeat with TimelineMax and there are plenty of methods and events that give you complete access to all aspects of your animation as shown in the demo below. See the Pen Burger Boy Finished / TimelineMax page by GreenSock (@GreenSock) on CodePen. Interesting note: The animation in the banner above is a mere 11 lines of TimelineMax code. The next demo illustrates many of the things TimelineLite and TimelineMax handle with ease, such as the ability to: insert multiple tweens with overlapping start times into a timeline create randomized bezier tweens control the entire set of tweens with a basic UI slider repeat the animation any number of times dynamically adjust the speed at runtime. Notice how the play / pause buttons smoothly accelerate and deccelerate? See the Pen Burger Boy Finished / TimelineMax page by GreenSock (@GreenSock) on CodePen Be sure to check out TimelineLite for more info on all the capabilities TimelineMax inherits. The chart below gives a birds-eye look at the methods these tools provide. ul.chart { width:360px; float:left; margin-right:30px; } ul.chart li:nth-child(1){ font-weight:700; list-style:none; margin-left:-20px; font-size:20px; margin-bottom:20px; } TimelineLite and TimelineMax Methods add() addLabel() addPause() call() clear() delay() duration() eventCallback exportRoot() from() fromTo() getChildren() getLabelTime() getTweensOf() invalidate() isActive() kill() pause() paused() play() progress() remove() removeLabel() render() restart() resume() reverse() reversed() seek() set() shiftChildren() staggerFrom() staggerFromTo() staggerTo() startTime() time() timeScale() to() totalDuration() totalProgress() totalTime() useFrames() Methods exclusive to TimelineMax currentLabel() getActive() getLabelAfter() getLabelBefore() getlLabelsArray() repeat() repeatDelay() tweenFromTo() tweenTo() yoyo()
  25. Hi there! Im looking for a professional to start a partnership. I have a demand of a new customer that needs a Full Stack Developer that are very skilled in Greensock and/or Adobe Animate. This project will be for a world known company that leads his market, so its a great opportunity. At this moment we need two person to deal the amount of work we will have if we got this contract. The customer said about 150 projects a month. I'd like to be very clear about all details. This is a project in building step, and I need your help to make it happens. The company still don't provided too much information about what need to be created. Basicaly will be lots of animated banners and some web interations. You can see a sample of their work here: https://app.frame.io/presentations/07cb2e9d-4f18-458e-855a-1fc05a657b30 So, what I need ASAP is two people that can embrace this partnership to we can got this great contract and make some money togheter. Please, take a look in the demo reel above and send me some prices bases in hour fee and fixed project so I can send a budget to the client. I'm going to the last meeting to make the deal and to make the things happen I need to have this team fullfiled. Thanks for your attention in advance Sam