Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'gsap'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 562 results

  1. Chronic

    Circular menu

    Hi, I've been trying to make a menu like this: https://maxilla.jp/ where the menu is a carousel and moves when you scroll, drag, or click. I'm guessing I have to use scrollmagic for the scrolling part, but I'm kind of lost. I just want to be able to scroll and the next item follows in sort of a circular path, like a carousel without arrows. I'm not expecting any of you to tell me the answer. I'd be more than happy if you just simply point me in the right direction. Thank you all for your time!
  2. Hi, I've been trying to re-create the history timeline where I found in: https://www.longines.com/company/history/20th/1939 I tried up to a certain point, after that i'm out of ideas. I've provided the work i've done so far. Up to now i've done the following things, OnDrag the handler, the years dots moves OnClick the year dot, page will scroll to the relevant history topic. Now I'm struggling in following areas, how identify, the handler is in between which two years dots, have to show the years data in the handler on passing each year dot, the content should scroll to relevant topic . If you look at the link you'll understand what i'm saying. And even-though, I manage to move the years dots, at end of it, the handler is going pass the last dot. If you look the reference link. They are correctly managing it. I've been trying this for last couple of weeks now. If you guys help on this that would be great.
  3. Hi all, Looking for a hand or some advice if possible. I've created this codepen (below) and it works well enough when you drag the content horizontally but I would also like to be able to scroll with the mouse through the content, very much like the functionality of this website - https://antoni.de/cases/ I'm fairly new to Javascript and certainly GSAP, so any input is much appreciated. Thanks Jon
  4. I am trying to develop an infinite canvas animation which show cases a number of clickable images on it. On moving the cursor the images will move in the opposite direction, I tried this with div now, is it possible to use Canvas for an infinite scroll effect. Plugins used: TweenMax, TweenLinte, ScrollToPlugin, Draggable
  5. Hi everyone. First of all, I wish everyone a good evening. I'm new to Gsap. I made an animation of myself using the side menu animation Timelinemax. There is no problem in opening and closing the side menu. I can open and close Timelinemax I have done with "t1.reverse()". But I want my menu to close when I press anywhere on the ".overlay". It closes Timelinemax with reverse, but the animation starts from halfway when you re-open the menu. I have been dealing with this problem for a long time. Where do you think the mistake is? I would be glad if you can help. I wish you good work.
  6. GreenSock

    GSAP 3.2 Released

    GSAP 3.2 has some groundbreaking features for converting coordinates and aligning elements. Check out the video explanation below. Warning: it's a bit advanced, but hopefully you'll see how crazy-useful these capabilities can be. New: "alignOrigin" for motion paths MotionPathPlugin recognizes a new alignOrigin property that pins a certain spot on the target to the path. For example, alignOrigin: [0.5, 0.5] pins the center of the target on the path and sets the transformOrigin accordingly so that rotations are around that point as well. To get a similar effect before 3.2, you'd need to set the transformOrigin separately as well as a -50 xPercent/yPercent. Use the Array syntax to define progress values along the x and y axis, so [1, 0.5] would be the right side, centered vertically. Or use a point object like {x: 20, y: 50} to specify a coordinate (measured from the top left corner in pixels at its native size). Sample code // Move the element along a path, rotating it along with the line gsap.to("#spaceship", { duration: 5, motionPath: { path: "#path", autoRotate: true, align: "#path", alignOrigin: [0.5, 0.5] // aligns the center of the target on the path } }); See the Pen MotionPath aligning with path demo by GreenSock (@GreenSock) on CodePen. See the MotionPathPlugin docs for details. New: getRelativeDistance() that transcends coordinate spaces Have you ever wanted to move one element to another element even if they're in different containers... which may have various transforms, warping the coordinate systems and making it super difficult to calculate? If so, you will love this magical function which is explained in the video at the top of this page. See the Pen GSAP 3 convertCoordinates() by GreenSock (@GreenSock) on CodePen. See the getRelativePosition() docs for details. New: convert coordinates between elements/contexts GSAP can now take a local coordinate from inside one element and calculate exactly where that coordinate lines up inside of ANOTHER element's local coordinate space! So you could take a "click" pointer event from the window and map that to an element's local coordinate system even if it's deeply nested inside various containers that have transforms applied! Or, as you can see in the demo below, convert between coordinate spaces to make the blue arm stay connected with the rotating red arm: See the Pen GSAP 3 convertCoordinates() by GreenSock (@GreenSock) on CodePen. See the convertCoordinates() docs for details. And more... GSAP 3.2 also delivers various bug fixes, so install the latest version today (3.2.6). There are many ways to get GSAP - see the Installation page for all the options (download, NPM, zip, etc.) Resources Full release notes on each release is on Github Full documentation In case you missed it: GSAP 3.1 highlights (previous release) Getting started with GSAP Learning resources Community forums Happy tweening!
  7. Hey, I'm pretty new at this GSAP thing. I've never made a transition between pages so I don't know the best way to do it. In my animation everything works fine the first time, but from then on it doesn't work the same. I know I should reset the animation to its initial state, but I don't even know where to start. Thanks in advance https://codepen.io/JamalDols/project/editor/AOmBar
  8. Hi, I want to make an animation with two lines. Basically the two lines should increase their width and form an "X". My problem is the rotation AND the fact that the animation should NOT start in the center of each line but on the "top-left" and "top-right" of the corresponding lines. When I rotate the lines and then perform the width animation strange things happen. I tried to get things work correct by using the "transform-origin" and "transform: translate()" properties but without success. I've attached an GIF with the X animation I want to achieve. Maybe someone can enlighten me since I'm at the very beginning of my animation career 😅
  9. GreenSock

    Physics2DPlugin

    Provides simple physics functionality for tweening an object's x and y coordinates (or "left" and "top") based on a combination of velocity, angle, gravity, acceleration, accelerationAngle, and/or friction. It is not intended to replace a full-blown physics engine and does not offer collision detection, but serves as a way to easily create interesting physics-based effects with the GreenSock animation platform. Parameters are not intended to be dynamically updateable, but one unique convenience is that everything is reverseable. So if you spawn a bunch of particle tweens, for example, and throw them into a timeline, you could simply call reverse() on the timeline to watch the particles retrace their steps right back to the beginning. Keep in mind that any easing equation you define for your tween will be completely ignored for these properties. Usage gsap.to(element, {duration: 2, physics2D: {velocity: 300, angle: -60, acceleration: 50, accelerationAngle: 180}}); See the Pen Physics2D Demo by GreenSock (@GreenSock) on CodePen. Learn more in the Physics2DPlugin documentation.
  10. Sometimes it's useful to tween a value at a particular velocity and/or acceleration without a specific end value in mind. PhysicsPropsPlugin allows you to tween any numeric property of any object based on these concepts. Keep in mind that any easing equation you define for your tween will be completely ignored for these properties. Instead, the physics parameters will determine the movement/easing. These parameters, by the way, are not intended to be dynamically updateable, but one unique convenience is that everything is reverseable. So if you create several physics-based tweens, for example, and throw them into a timeline, you could simply call reverse() on the timeline to watch the objects retrace their steps right back to the beginning. Here are the parameters you can define (note that friction and acceleration are both completely optional): velocity : Number - The initial velocity of the object measured in units per second (or for tweens where useFrames is true, it would be measured per frame). (Default: 0) acceleration : Number - The amount of acceleration applied to the object, measured in units per second (or for tweens where useFrames is true, it would be measured per frame). (Default: 0) friction : Number - A value between 0 and 1 where 0 is no friction, 0.08 is a small amount of friction, and 1 will completely prevent any movement. This is not meant to be precise or scientific in any way, but it serves as an easy way to apply a friction-like physics effect to your tween. Generally it is best to experiment with this number a bit, starting at a very low value like 0.02. Also note that friction requires more processing than physics tweens without any friction. (Default: 0) gsap.to(elem, { duration: 2, physicsProps: { x: {velocity: 100, acceleration: 200}, y: {velocity: -200, friction: 0.1} } });
  11. Hello, I am using scroll magic, What I am doing is, I have to scroll the element on scroll. I fount the example here https://codepen.io/PointC/pen/zaBYoW and I try to understand the script but I am not able to use pseudo class with find method. Would you help me out this?
  12. I put the following CDN code in my HTML file and then executed TimelineLite function in javascript. <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TimelineMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/easing/EasePack.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js"></script> <My javascript code> start = ()=> { let loader = document.getElementById('loading'), loadContents = document.getElementsByClassName('loading_content'), tlLoader = new TimelineMax(); // Loader Timeline tlLoader .staggerFromTo(loadContents, 0.3, {y:0, autoAlpha: 0}, {y:20, autoAlpha: 1, ease:Back.easeInOut}, 0.05 ) .fromTo(loader,0.3, {autoAlpha: 1, scale: 1.3}, {autoAlpha: 0, scale: 1, ease:Power0.easeNone}, 0.9 ); } start(); Then... the following error appeared in Console. Why is this happening? I guess I add the CDN code incorrectly, so I change to another CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> and tried to use changed TimelineMax to TimelineLite in my javascript code. but this problem is still happening now. plz.. help me
  13. Hello all I want to create a animation like CSS3 keyframe animation with GSAP, but I have encountered some problems. The first is how to set keyframes, see the below css code: .element{ animation: ball 2s ease-in-out } @keyframes ball{ 25%{ background:red; } 50%{ background:yellow; } 75%{ background:green; } 100%{ background:black; } } //or a more complex one .Shake { animation: Shake 3s ease 0s forwards; } @keyframes Shake { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 20%, 40%, 60%, 80% {transform: translateX(10px);} } I use TimelineLite.to() with accurate time setting to create a similar animation: var timeline = new TimelineLite(); timeline .to(element, 0.5s, {backgroundColor:red}) .to(element, 0.5s, {backgroundColor:yellow}, 0.5) .to(element, 0.5s, {backgroundColor:green}, 1) .to(element, 0.5s, {backgroundColor:black}, 1.5) Is there any better way to create such a animation? And the second problem is how to set a type of ease to the whole timelineLite, not just to one of the tweens? For example, in css, 'ease-in-out' is applied to the whole animation, not just between two of the keyframes. .element{ animation: ball 2s ease-in-out } But in gsap, it just works on one of the tweens , not the whole timeline. var timeline = new TimelineLite(); timeline .to(element, 0.5s, {backgroundColor:red,ease: Back.easeOut}) .to(element, 0.5s, {backgroundColor:yellow,ease: Back.easeOut}, 0.5); Any help very much appreciated!
  14. Can anyone please help me to develop exactly same scroll as this example http://320and360wythe.com/team. In this we can scroll manually and pause in between section. If we scroll more it will animate to next slide.
  15. GreenSock

    TweenMax

    Note: TweenMax has been deprecated in GSAP 3 in favor of the streamlined gsap object. It has 50+ new features and is almost <strong>half the size!</strong> GSAP 3 is backward compatible with the vast majority of GSAP 2 features including TweenMax. Please see the Migration Guide for details. TweenMax lets you animate literally any property of any object that JavaScript can touch (CSS, SVG, React, Vue, Three.js, canvas, motion paths, generic objects, etc.). Before the release of GSAP 3, TweenMax was the most feature-packed (and popular) animation tool in the GSAP arsenal. However in GSAP 3, you no longer even need to reference TweenMax in your code (although you can because GSAP 3 honors the vast majority of legacy code). We strongly recommend migrating to GSAP 3's streamlined syntax. Quick links Getting started What's so special about GSAP? Documentation: Version 2 | Version 3 Showcase (examples) For convenience and loading efficiency, TweenMax version 2 and earlier included TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, BezierPlugin, and EasePack (all in one file). Every bit of that functionality (plus a lot more) is in the GSAP 3 core which is almost half the size. Staggered animations GSAP makes it easy to create staggered animations on multiple objects. The animations can overlap, run in direct sequence or have gaps between their start times. The old TweenMax stagger methods (from version 1 and 2): TweenMax.staggerTo(), TweenMax.staggerFrom() and TweenMax.staggerFromTo() aren't even necessary in GSAP 3 because a "stagger" special property can be added to ANY tween, like in the demo below: Additional Methods (only relevant for version 1 and 2) TweenMax inherits methods from TweenLite and it also has quite a few of its own. ul.chart {width:300px; float:left; margin-right:80px; } ul.chart li:nth-child(1){ font-weight:bold; list-style:none; margin-left:-20px; font-size:20px; margin-bottom:20px; } TweenLite and TweenMax Methods delay() delayedCall() duration() eventCallback from() fromTo() getTweensOf() invalidate() isActive() kill() killDelayedCallsTo() killTweensOf() pause() paused() play() progress() restart() resume() reverse() reversed() seek() set() startTime() time() timeScale() to() totalDuration() totalProgress() totalTime() Methods exclusive to TweenMax getAllTweens() isTweening() killAll() killChildTweensOf() pauseAll() repeat() repeatDelay() resumeAll() staggerFrom() staggerFromTo() staggerTo() updateTo() yoyo() Learn more in the TweenMax version 2 documentation.
  16. Hello, i'm using gsap with scroll magic to animate on my project i tried to implamente smoothscroll, like this exemple, it's working right ecxept for pinned section. Any help plz ?
  17. Hey guys. I am trying to make a morph shape with gsap plugin. The result I want to achieve is: THE GOAL IS: Find svg's with class "morph" and runs timeline animation only for the one's that is in the viewport. THE ISSUE I HAVE: I did some work in the codepen, but the issue is, that every time my window detects the svg class "morph" it start to animate all the shapes/timelines on the website - and not only the ones visible in the viewport. Any ideas how to adjust my codepen? Thank you in advance
  18. Hi all, I started working on an idea and want to stop before I go further and ask a few questions and get some criticism on best practices. I'll preface with saying that I'm only concerned with modern browsers. First, GSAP performance. Is there a better approach I could take to accomplish the same thing and would perform better? Second, React with GSAP. This should probably be a separate question... I've been building react apps via `create-react-app` for a while and in the past, I had some issues using GSAP in React. Mostly, with using plugins that `require TweenLite`, requiring me to eject the `create-react-app` and customize the webpack config to resolve the alias. (As an aside, I now get around ejecting for simple things like this by using react-app-rewired). There are some edge case issues in particular I'm trying to solve. When you move the mouse quickly from left to right, sometime the cube will spin too much. I've played around with some boolean checks to see if I'm overlapping tweens or something but nothing seems to help. I suspect it's based on the way I'm "snapping" the cube's most forward face to the center when the mouse moves back to the center. EDIT 1... is it possible that this is related to React state? I wonder if react-gsap-enhancer would help. EDIT 2... looks like the codepen may even have other issues that aren't present in my local setup. If you move the mouse too far past the cube it stops, which should only occur when the mouse is over the cube. And it's more difficult to see the real issue I'm trying to solve in the codepen.
  19. I'm currently trying to implement a smooth scroll just like @OSUblake's smooth scroll. https://codepen.io/magiix/pen/MWwbmMV As for my content I solely have some images and some text. These images and texts are being fetched asynchronously, as soon as the data is set I try to resize the body to make the smooth scroll work for all of its content: doResize() { this.scroller.scrollRequest++; this.requestId = null; this.scroller.resizeRequest = 1; this.requestId = requestAnimationFrame(this.updateScroller.bind(this)); } This works fine. But somehow the text is still causing some minor height problems, not much but there's still some inset not showing all of the body's content - not always, but moste of the times. Removing the text solves the problem, but that's obviously not an option. My text component: <div class="row m-0"> <div class="col p-0"> <h1 class="title-container"> {{title}} </h1> </div> <div class="col p-0"> <p>{{text}}</p> </div> </div> Removing p solves the problem. Calling doResize() after a few second does also help, but I want it to have the correct height from the very start. BTW changing p's line height etc. does also affect the inset's size hiding some content. Any suggestion how to prevent this from happening? EDIT: After removing the custom font, everything works as well - how so?
  20. GSAP 3 is the most significant upgrade we have ever had. With 50+ new features, there's a lot to be excited about. Here are a few of the highlights: Check out the full demo collection for more. A special shout-out to @dsenneff who created the animation at the top of this page! Jump right in - here's a starter codepen: See the Pen Try GSAP 3 on CodePen by GreenSock (@GreenSock) on CodePen. More ways to play: GSAP 3 Starter Pen - Fork the CodePen and away you go. Download the files to use locally. Using a build tool? npm install gsap will get you the files. If you're a Club GreenSock user, there's a gsap-bonus.tgz tarball file in download that you can simply drop into your project's folder and then npm install ./gsap-bonus.tgz and BOOM, it'll be installed just like any other package! See the installation docs for more information. The GSAP 3 docs Tell us what you think! Feel free to post in the our forums about what you like and any questions that you have. Or you can contact us directly if a public forum isn't your style. Are you interested in having a GreenSock representative teach your team about the new version or speak at your next conference? Contact us and we'll do our best to make it happen! Happy tweening!
  21. Errabaany

    full height path

    Hello I have to do a airplane that fly vertically left and right whenever the user scrolled, I already did it with Scroll magic and I can't figure how to do it right, i know the problem is on the path it must take full height of my container but i don't know how to do it do you have any idea guys I've been stacked for 2 days Thank you
  22. Hello. This is a basic question regarding my StaggerTo animations. For scope of this, I'm using 2.x still and am using StaggerTo to animate a hand of cards and all of them work beautifully when adding new references to the array. When adding a reference/element to the middle of any stagger or removing an element from an array, I get some experiences I didn't expect. Delete from the array: It doesn't animate out or in reverse as I expected, it just "pops" out of existence. Example: https://gyazo.com/a6cb14ef2b75f9dd40eaf4393581db93 Add to middle of an array: The index and all items after the index are removed, and then they are animated in afterwards. Example: https://gyazo.com/d8e710656e77aeab1ad67110325b871d After research I'm not able to find out if there's a way to work a different stagger, or a setting that can be flipped to enable animations when an item is removed from the array. Or is it this way by design? I looked into make a codepen example, but I lack the skill to recreate the React Hooks + GSAP in codepen in any semblance of a reasonable timeframe, figured with this question it could be a quick answer before I potentially tried to do a lot of work for something that could be as simple as "not by design!". If anyone is kind enough to read and respond to this, I would greatly appreciate it.
  23. james182

    3 Box Hover issues

    Hi I have three card elements with hover animations and they are not working as expected, they have glitches. When hovering over a card element the animations works but when you mouse out or mouse over again it freaks out and all three elements play. Could i please get some assistance.
  24. Hey Superhero, I'm totally new for Awesome GSAP and just start learning with create sample website. so please check out this website https://wickret.cuberto.com Give me suggestions to create this all animations which is used by above website.
  25. 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. 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!
×