Search the Community
Showing results for tags 'jquery'.
-
Hello GSAP community ? I had a problem with the animation being quite light I think xD. But I spent hours and couldn't implement it. I am attaching my codepen so you can see my code: https://codepen.io/ProjectDCL/pen/wvbyXQW I'm creating an animation for a modal window to appear to select the language version of the site. My animation works correctly when opening and closing the very first time, but as soon as I try to open/close my modal window again the animation breaks. I think it has to do with this line of code langContainer = $(this).siblings('.lang-container') I use it because on my site there are several places with a language switch and I don't want them all to open at once. I also need that when a modal window is open, if the user clicks anywhere on the site except the modal window itself, then it closes. Perhaps you have ideas on how this can be done? I tried to simply add a reverse timeline when clicking on a $document, but with this approach it will also capture the modal window. Write if you need more information. I will be incredibly grateful for your help!
-
I want to make a half wheel animation with javascript, the purpose of the animation is an animation with 50 or more long names and I want to determine the winner in the variable, but I could not make this animation and I could not find any examples on the internet. example:
- 3 replies
-
- animation
- javascript
-
(and 3 more)
Tagged with:
-
Hi I'm trying to replicated the transitions on this pages sections http://cuberto.com using TweenMax. var slides=document.querySelectorAll('.slide'); var tl=new TimelineLite({paused:true}); for(var i=slides.length;i--;){ var D=document.createElement('div'); D.className='Dot'; D.id='Dot'+i; D.addEventListener('click',function(){ tl.seek(this.id).pause() }); document.getElementById('Dots').appendChild(D); tl.add('Dot'+i) if(i>0){ if(i!=slides.length-1) { tl.addPause() } tl .set(slides[i-1].getElementsByClassName("sideDetails"), {width: "0"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {width:'50%'},{ width: "100%", ease: Power2.easeInOut}) .to(slides[i].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60", ease: Power2.easeInOut},0) .set(slides[i],{ background: "none"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {x: "0%"},{ x: "100%", ease: Power2.easeInOut}, .3) .to('#Dot'+i,.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i) .set(slides[i],{zIndex:1-i}) .set(slides[i-1],{zIndex:slides.length}) .to(slides[i-1].getElementsByClassName("sideDetails"), .3,{width: "50%",ease: Power2.easeInOut}, .6) .fromTo(slides[i-1].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60" }, {opacity: "1", y:"0",ease: Power2.easeInOut},.6) }; }; full code at codepen can be found here I'm basically trying to transition between a bunch of sliders with a swipe animation, I have alternated the element i would like to transition on each slide in black or pink so I can see the animation. I can seem to isolate the animation to the current slide - in essence I want the left hand div to grow to 100%, then animate off the page to the right, then switch to the next slider and animate the left hand dive to a width of 50% from an initial state of 0. I believe that is what the Cuberto site is doing. However I am getting in an awful mess with the scroll event firing an animation on all the slides. I'm not particularly competent with vanilla javascript but would like to attempt this with or without jQuery. I have tried pagepiling.js and fullpage.js but this doesn't achieve the effect I'm looking for. I could really do with a a resolution I can go to my client with, or at least a direction I could go in. Thanks javascript jquery horizontal-scrolling gsap pagepiling.js shareeditdeleteflag asked 4 mins ago DansBananaLoafcake 62 add a comment
- 10 replies
-
- tweenmax
- horizontal scrolling
-
(and 3 more)
Tagged with:
-
Hi! I've made an SVG image with several different objects. The interaction would be this: - If you hover an element there would be a small effect on this element. (a scale, rotate and move depending on the mouse position.) - If you hover out the element get back to the original position. Currently, I have a problem with the targeting, the effect animates all the elements in the SVG. ...And some with the mouse position tracking:) How can I solve this? Thanks for the help in advance
-
Hello, I've created a projects slider with interactive draggable projects menu. The snipped runs bi-directionally - if you scroll through projects it uses scrollTrigger to update the projects menu, and in reverse - if you click items in the menu, it scrolls the website to the chosen project. The problem is with the draggable projects menu, it works great on desktop and on android firefox, however in Android Chrome and on native Samsung Browser the links don't always work. It changes colour, as if the hover event fired, however touch/click doesn't register. I've tried adding Draggable setting of minimumMovement up to 20, but it doesn't help, and once I touch the link it visibly moves a few pixels so it seems like the dragging overpowers the click/tap. Please check out the codepen example in Android Chrome in landscape mode. (Sorry for the messy code, it had to be extracted from a bigger code). Thank you in advance
-
Hello everyone, I would like to develop this kind of animation for my background. Anybody suggest me about this how can I develop this? Also how can I add liquid hover effect on images. https://s.muz.li/NzNjY2YzNGRi Thanks
-
Does anyone knows how to make a website like this?? - https://www.erikasenftmiller.com/ What plugins should I use? and if you have codepen link please share it with me Thanks
-
Good day everyone. I have just completed my personal portfolio site which makes use of GSAP. However, it seems the animations are not playing and so the page remains blank. Everything works fine on my local server but when I uploaded my website to the dreamhost servers, the animations no longer work. There are no errors whatsoever on the console. I contacted the customer service and was told that in my error.log file it says the folder where all my GSAP.js files are located cannot be found. But looking at my panel, all files were uploaded successfully. Ok, in order to be sure it was not just the dreamhost servers, I decided to try uploading the site to github servers and still the same thing. The site and all files uploaded successfuly but the javascript files are not running or located. I don't know exactly. And after looking at the console and the network in the google developer tools, there is no single error, it shows all files were uploaded successfully as there is no error. What may be causing this issue? I'm lost.
- 6 replies
-
- servers
- javascript
-
(and 2 more)
Tagged with:
-
Hi there! I'm newbie with GSAP but really enjoy using it!!! I'm currently trying to build a hover for my site company that play a video on background when hovered. As you can see on the code pen exemple, it works great. My problem is: I would like to pause the video after the the timeline reverse completely. I can find how to delay the pause fonction or using onReverseComplete in the timeline properties but nothing work... Another solution would be to just pause the video and not going back to 0 but the fix img (.img) doesn't come back. But I can't find how to exclude the img animation when the timeline is reversed. Thanks for your help
- 2 replies
-
- 1
-
- gsap
- javascript
-
(and 3 more)
Tagged with:
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .loading{ background: orangered; position: absolute; top: 0; bottom: 0; right: 0; height: 100%; width: 100%; z-index: -99; } button{ padding: 10px 30px; background:#323232; color: white; outline: none; border: none; position: absolute; z-index: 9; top: 45%; left: 45%; cursor: pointer; } </style> <body> <div class="loading"> </div> <div class="btn"> <button>CLick</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js "></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js "></script> <script> const ld_gray = gsap.timeline({paused: true}); ld_gray.from('.loading', {duration: 1, delay: 0.5, scaleX: 0, transformOrigin: 'left', ease: "expo.out",}); ld_gray.to('.loading', {duration: 1, delay: 1, scaleX: 0, transformOrigin: 'right', ease: "expo.in",} ); $('button').click(function () { ld_gray.restart(); }); </script> </body> </html>
- 2 replies
-
- css
- javascript
-
(and 3 more)
Tagged with:
-
I want to animate the background, If click the button background will be animate, It works fine except that after one click, It doesn't work again. <body> <div class="loading"></div> <div class="btn"> <button>CLick</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js "></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js "></script> <script> $('button').click(function () { ld_gray = gsap.from('.loading', 1,{delay: 0.5, scaleX: 0, transformOrigin: 'left', ease: "expo.out",}); gsap.to('.loading', 1,{ delay: 1.5, scaleX: 0, transformOrigin: 'right', ease: "expo.in",} ); }); </script> </body>
-
Note: The gsap.jquery.js plugin was created for GSAP version 2 and earlier. We have since released GSAP 3 with many improvements but this plugin was discontinued because it no longer seemed relevant with the widespread shift away from using jQuery for animation. GSAP 3 does NOT support this plugin. We recommend simply using GSAP directly for all your animation needs from now on. Good news for anyone using jQuery.animate() - the new jquery.gsap.js plugin allows you to have GSAP take control under the hood so that your animations perform better; no need to change any of your code. Plus GSAP adds numerous capabilities, allowing you to tween colors, 2D transforms (rotation, scaleX, scaleY, skewX, skewY, x, y), 3D transforms (rotationX, rotationY, z, perspective), backgroundPosition, boxShadow, and lots more. You can even animate to a different className! This plugin makes it very easy to audition GSAP in your project without needing to learn a new API. We still highly recommend learning the regular GSAP API because it's much more flexible, robust, and object-oriented than jQuery.animate(), but for practical purposes this plugin delivers a bunch of power with almost zero effort. Benefits Up to 20x faster than jQuery's native animate() method. See the interactive speed comparison for yourself. Works exactly the same as the regular jQuery.animate() method. Same syntax. No need to change your code. Just load the plugin (and TweenMax or TweenLite & CSSPlugin) and you're done. Adds the ability to animate additional properties (without vendor prefixes): colors (backgroundColor, borderColor, color, etc.) boxShadow textShadow 2D transforms like rotation, scaleX, scaleY, x, y, skewX, and skewY, including 2D transformOrigin functionality 3D transforms like rotationY rotationX, z, and perspective, including 3D transformOrigin functionality borderRadius (without the need to define each corner and use browser prefixes) className which allows you to define a className (or use “+=” or “-=” to add/remove a class) and have the engine figure out which properties are different and animate the differences using whatever ease and duration you want. backgroundPosition clip Animate along Bezier curves, even rotating along with the path or plotting a smoothly curved Bezier through a set of points you provide (including 3D!). GSAP’s Bezier system is super flexible in that it’s not just for x/y/z coordinates – it can handle ANY set of properties. Plus it will automatically adjust the movement so that it’s correctly proportioned the entire way, avoiding a common problem that plagues Bezier animation systems. You can define Bezier data as Cubic or Quadratic or raw anchor points. Add tons of easing options including proprietary SlowMo and SteppedEase along with all the industry standards When animating the rotation of an object, automatically go in the shortest direction (clockwise or counter-clockwise) using shortRotation, shortRotationX, or shortRotationY For a detailed comparison between jQuery and GSAP, check out the cage match. Usage Download the files (requires version 1.8.0 (or later) of TweenMax or TweenLite!) and then add the appropriate script tags to your page. The plugin file (jquery.gsap.min.js) itself does NOT include GSAP because you get to choose which files you want to load depending on the features you want. The simplest way to get all the goodies is by loading TweenMax (which includes TweenLite, CSSPlugin, TimelineLite, TimelineMax, EasePack, BezierPlugin, and RoundPropsPlugin too). For example, assuming you put the TweenMax.min.js file into a folder named "js" which is in the same directory as your HTML file, you'd simply place the following code into your HTML file: All the goodies: <script src="js/TweenMax.min.js"></script> <script src="js/jquery.gsap.min.js"></script> If, however, you're more concerned about file size and only want to use TweenLite, CSSPlugin (for animating DOM elements), and some extra eases, here is a common set of script tags: Lightweight: <script src="js/plugins/CSSPlugin.min.js"></script> <script src="js/easing/EasePack.min.js"></script> <script src="js/TweenLite.min.js"></script> <script src="js/jquery.gsap.min.js"></script> Then, to animate things, you can use the regular jQuery.animate() method like this: //tween all elements with class "myClass" to top:100px and left:200px over the course of 3 seconds $(".myClass").animate({top:100, left:200}, 3000); //do the same thing, but with a Strong.easeOut ease $(".myClass").animate({top:100, left:200}, {duration:3000, easing:"easeOutStrong"}); //tween width to 50% and then height to 200px (sequenced) and then call myFunction $(".myClass").animate({width:"50%"}, 2000).animate({height:"200px"}, {duration:3000, complete:myFunction}); See jQuery's API docs for details about the syntax and options available with the animate() method. And yes, the jQuery.stop() method works too. Caveats If you define any of the following in the animate() call, it will revert to the native jQuery.animate() method in order to maximize compatibility (meaning no GSAP speed boost and no GSAP-specific special properties will work in that particular call): a "step" function - providing the parameters to the callback that jQuery normally does would be too costly performance-wise. One of the biggest goals of GSAP is optimized performance; We'd strongly recommend NOT using a "step" function for that reason. Instead, you can use an onUpdate if you want a function to be called each time the values are updated. Anything with a value of "show", "hide", "toggle", "scrollTop" or "scrollLeft". jQuery handles these in a unique way and we don't want to add the code into CSSPlugin that would be required to support them natively in GSAP. If skipGSAP:true is found in the "properties" parameter, it will force things to fall back to the native jQuery.animate() method. So if a particular animation is acting different than what you're used to with the native jQuery.animate() method, you can just force the fallback using this special property. Like $(".myClass").animate({scrollTop:200, skipGSAP:true}); This is our first crack at a jQuery plugin, so please let us know if anything breaks or if you have ideas for improvement.
-
Hi guys, I am working on this app that uses jquery for functionality, however I have never really used it, especially not in conjunction with GSAP. I did get the animation to work thanks to your doc, however I am not clear as to how I would do a GSAP fromTo method using the jQuery syntax. Basically I am trying to use GSAP to animate some jquery modal transitions. To just test that the animation is working at all I used the below .animate method which is animating fine, but what I really want to do is a fromTo animation, where the modal is scaled up from width/height:0 to 1200px x 705px. In my showModal function I have this: var showModal = function () { setTimeout(function(){ //alert("Boom!"); }, 2000); $(options.selector.outer).css('display', 'flex'); $(options.selector.inner).animate({width:"1200px", height:"705px", display:'flex'}, {duration:1000, complete:onShowComplete}); }; Thank you!
-
I was trying to create a simple button hover effect using the jQuery(this) on the button. When you swipe your mouse over the button real fast the hover out animation triggers and does not allow the hover in animation to finish. This causes the button to get smaller and smaller and causes the text to stack up. I've seen solutions for this problem but none of them allow me to use jQuery(this) in the timeline. Any help would be much appreciated. ?
-
At first sight an easy animation causes lags and is choppy on mobile devices. In Chrome I can reproduce it by going to F12 > emulate mobile > iPhone 6/7/8. And when the page is scrolled down it's possible to see that the animated text is kind of jiggling up and down, in other words, it's choppy. GIF with visual representation
-
I am trying to create a website using the background effect exactly similar as implemented in this website, http://brightmedia.pl/ . On inspect element the div that creating the parallax effect on background from mouse move and scroll as well, we can see that it is changing the translate3D() property of the element on mouse move. Please guide me how can I achieve this same background effect?
-
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. Update: don't miss our guest post on css-tricks.com, Myth Busting: CSS Animations vs. JavaScript which provides some additional data, visual examples, and a speed test focused on this topic. jQuery is the 700-pound gorilla that has been driving lots of animation on the web for years, but let's see how it fares when it steps into the ring with the feisty GSAP (GreenSock Animation Platform) which gained its fame in the Flash world and is now flexing its greased-up muscles in JavaScript. Before we put the gloves on, we need to make it clear that we've got the utmost respect for jQuery, its authors, and its community of users (to which we belong). It's a fantastic tool that we highly recommend for non-animation tasks. This tongue-in-cheek "cage match" is solely focused on animation. Performance Performance is paramount, especially on mobile devices with sluggish processors. Silky smooth animation is the hallmark of any animation platform worth its weight. This round wasn't even close. GSAP was up to 20 TIMES faster than jQuery under heavy stress. See a speed comparison for yourself or make your own. Performance winner: GSAP Controls With jQuery, you can stop an animation but that's about it. Some 3rd party plugins add resume capability, but jQuery takes a pounding in this round. GSAP's object oriented architecture allows you to pause, resume, reverse, restart, or jump to any spot in any tween. Even adjust timeScale on the fly for slow motion or fastforward effects. Place tweens in a timeline with precise scheduling (including overlaps or gaps) and then control the whole thing just like it's a single tween. All of the easing and effects remain perfectly intact as you reverse, pause, adjust timeScale, etc. And you can even kill individual portions of a tween anytime (like if a tween is controlling both "top" and "left" properties, you can kill "left" while "top" continues). Put labels in a timeline to mark important spots and seek() to them anytime. Imagine trying to build the example below using jQuery. It would be virtually impossible. With GSAP, it's easy. In fact, all of the animation is done with 2 lines of code. Drag the slider, click the buttons below, and see how easy it is to control the sequenced animation. See the Pen Impossible with jQuery: controls (used in jquery cagematch) by GreenSock (@GreenSock) on CodePen. Controls winner: GSAP Tweenable Properties jQuery.animate() works with basic numeric properties, but that's about it. If you want to do more, you'll need to rely on lots of 3rd party plugins which may have spotty support or unresolved bugs. GSAP's CSSPlugin handles almost anything you throw at it while protecting you from various browser bugs and prefix requirements. GSAP jQuery = supported = supported with 3rd party plugins = partially supported with 3rd party plugins Basic numeric css properties like left, top, opacity, fontSize, etc. Supported Supported Colors like backgroundColor, borderColor, etc. Supported Supported with 3rd party plugins backgroundPosition Supported Supported with 3rd party plugins boxShadow Supported Supported with 3rd party plugins clip Supported Supported with 3rd party plugins textShadow (including multiple text shadows) Supported Partially supported with 3rd party plugins 2D transforms like rotation, scaleX, scaleY, x, y, skewX, and skewY, including 2D transformOrigin and directional rotation functionality Supported Partially supported with 3rd party plugins 3D transforms like rotationY rotationX, z, and perspective, including 3D transformOrigin and directional rotation functionality Supported Partially supported wiht 3rd party plugins borderRadius (without the need to define each corner and use browser prefixes) Supported Partially supported with 3rd party plugins className allows you to define a className (or use "+=" or "-=" to add/remove a class) and have the engine figure out which properties are different and animate the differences using whatever ease and duration you want. Supported Partially supported with 3rd party plugins Tweenable properties winner: GSAP Workflow When you're creating fun and interesting animations, workflow is critical. You need to be able to quickly build sequences, stagger start times, overlap tweens, experiment with eases, leverage various callbacks and labels, and create concise code. You need to be able to modularize your code by creating functions that each spit back an animation object (tween or timeline) which can be inserted into another timeline at a precise time. You need a flexible, powerful system that lets you experiment without wasting hours wrestling with a limited tool set. jQuery has some nice simple convenience methods like show(), hide(), fadeIn(), and fadeOut(), but GSAP bloodies its nose in this round: GSAP jQuery = supported = unsupported Easily create sequences (even with overlapping animations) that can be controlled as a whole Supported Unupported Flexible object-oriented architecture that allows animations to be nested inside other animations as deeply as you want Supported Unupported Animate things into place (backwards) with convenience methods like from() and staggerFrom() Supported Unupported Accommodate virtually any ease including Bounce, Elastic, SlowMo, RoughEase, SteppedEase, etc. Supported Unupported Create a staggered animation effect for an array of objects using one method call (like staggerTo(), staggerFrom(), or staggerFromTo()) Supported Unupported Easily repeat and/or yoyo a tween a specific number of times (or indefinitely) without resorting to callbacks or redundant code Supported Unupported Callbacks for when a tween or timeline starts, updates, completes, repeats, and finishes reversing, plus optionally pass any number of parameters to those callbacks Supported Unupported Place labels at specific times in a sequence so that you can seek() to them and/or insert animations there. Supported Unupported Animate any numeric property of any JavaScript object, not just DOM elements Supported Unupported Call a function whenever the entire platform finishes updating on each frame (like for a game loop) Supported Unupported Workflow winner: GSAP Compatibility Browser inconsistencies and bugs are the bane of our existence as developers. Whether it's the way Internet Explorer 8 implements opacity or Safari's transformOrigin bug that wreaks havok on 3D transforms or the fact that browser prefixes are required to enable many of the more modern browser features, you want your animations to "just work" without having to learn all the annoying hacks. jQuery does a great job of delivering cross-browser consistency overall, but when it comes to animation it falls a bit short mainly because it doesn't even attempt to handle the more modern CSS properties. No JavaScript framework can work miracles and suddenly make IE8 do fluid 3D transforms, for example, but GSAP implements a bunch of workarounds under the hood to solve problems wherever possible. It can do 2D transforms like rotation, scaleX, scaleY, x, y, skewX, and skewY all the way back to IE6 including transformOrigin and directional rotation functionality! Plus it works around scores of other browser issues so that you can focus on the important stuff. Compatibility winner: GSAP Popularity jQuery has been around for a long time and has gained incredible popularity because it does many things well. It's like the Swiss Army knife of JavaScript. There probably isn't a single JavaScript tool that's more popular than jQuery, and GSAP is no exception. As the new kid on the block, GSAP is gonna have to prove itself in the JavaScript community just like it did in the Flash community before it's crowned the undisputed champion. Popularity winner: jQuery Conflict management What happens if there's already a tween running that's controlling a particular object's property and a competing tween begins? jQuery does nothing to manage the conflict - the original tween keeps running. For example, let's say you're animating an element's "top" to 100px and that tween still has 2 seconds left before it's done, and another tween starts running that animates the same element's "top" to 0px over the course of 1 second. It would tween to 0px and then immediately jump to almost 100px and finish that [first] tween. Yuck. GSAP automatically senses these conflicts and handles them behind the scenes. In this case, it would kill the "top" portion of the first tween as soon as the second tween begins. Plus there are several other overwrite modes you can choose from if that's not the behavior you want. Conflict management winner: GSAP Support Both jQuery and GSAP have thriving support forums, but since right now jQuery has a massive user base, you're very likely to find someone with an answer to your question. Even though the GreenSock forums rarely have a question that remains unanswered for more than 24 hours, jQuery's pervasiveness gives it an edge here. On the other hand, GreenSock's forums are manned by paid staff (including the author of the platform), so you're quite likely to get solid answers there. Add to that the fact that GreenSock has a track record of being much more agile in terms of squashing bugs and releasing updates than jQuery, so we'll call this round a tie. Support winner: tie Expandability jQuery and GSAP both offer a plugin architecture, but since jQuery has been out much longer and gained so much popularity, there are numerous plugins available. Some are good, some are not, but there is a thriving community of plugin developers out there. Even though technically they're both equally expandable, the sheer number of plugins currently available for jQuery give it the advantage in this round. Expandability winner: jQuery Learning resources Again, jQuery's popularity trumps anything GSAP could throw at it right now. There are lots of tutorials, videos, and articles about jQuery whereas GSAP is new to the game. GreenSock is being aggressive about putting together solid resources (like the Jump Start tour) and the community is crankin' out some great articles and videos too, but jQuery scores the win in this round. Learning resources winner: jQuery Price & license Both jQuery and GSAP are completely free for almost every type of usage and both allow you to edit the raw source code to fix bugs (if that's something you need to do). If you plan to use GSAP in a product/app/site/game for which a fee is collected from multiple customers, you need the commercial license that comes with "Business Green" Club GreenSock memberships (one-off commercial projects don't need the special license). It's actually a more business-friendly license in many ways than a typical open source license that offers no warranties or backing of any kind or imposes code sharing or credit requirements. GreenSock's licensing model provides a small funding mechanism that benefits the entire user base because it empowers continued innovation and support, keeping it free for the vast majority of users. See the licensing page for details. jQuery employs an MIT license and is free for virtually all uses. As much as we all like "free" software, there's always a cost somewhere. jQuery has a few large corporate sponsors that have helped keep it viable. Both jQuery and GreenSock have long track records of delivering updates, bug fixes, and new features (GreenSock is newer to JavaScript, but served the Flash community since around 2006). Both count some of the largest companies in the world among their user base. Although there are some clear benefits of GreenSocks' license over jQuery's, we'll give this round to jQuery because it is technically "free" in more scenarios than GSAP. Price & license winner: jQuery File size jQuery weighs in at about 32kb gzipped and minified whereas GSAP's TweenLite and CSSPlugin are about half that combined. So in half the size, you're getting significantly more animation capabilities and speed. GSAP is built in a modular fashion that allows you to use just the parts that you need. Of course jQuery serves many other purposes beyond animation, but in this cage match we're focused on animation. Even if you add up TweenLite, TimelineLite, TimelineMax, TweenMax, EasePack, CSSPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin, and RoundPropsPlugin, it's still almost 20% less than jQuery. File size winner: GSAP Flexibility Let's face it: any tweening engine can handle the basics of animating one value to another, but it's really the details and advanced features that make a robust platform shine. GSAP crushes jQuery when it comes to delivering a refined, professional-grade tool set that's truly flexible. All these conveniences are baked into GSAP (no 3rd party plugins required): Tween any numeric property of any object. Optionally round values to the nearest integer to make sure they're always landing on whole pixels/values. Animate along Bezier curves, even rotating along with the path or plotting a smoothly curved Bezier through a set of points you provide (including 3D!). GSAP's Bezier system is super flexible in that it's not just for x/y/z coordinates - it can handle ANY set of properties. Plus it will automatically adjust the movement so that it's correctly proportioned the entire way, avoiding a common problem that plagues Bezier animation systems. You can define Bezier data as Cubic or Quadratic or raw anchor points. Animate any color property of any JavaScript object (not just DOM elements). Define colors in any of the common formats like #F00 or #FF0000 or rgb(255,0,0) or rgba(255,0,0,1) or hsl(30, 50%, 80%) or hsla(30, 50%, 80%, 0.5) or "red". Set a custom fps (frames per second) for the entire engine. The default is 60fps. All tweens are perfectly synchronized (unlike many other tweening engines). Use the modern requestAnimationFrame API to drive refreshes or a standard setTimeout (default is requestAnimationFrame with a fallback to setTimeout) Tons of easing options including proprietary SlowMo, RoughEase and SteppedEase along with all the industry standards Animate css style sheet rules themselves with CSSRulePlugin Animate the rotation of an object in a specific direction (clockwise, counter-clockwise, or whichever is shortest) by appending "_cw", "_ccw", and "_short" to the value. You can tween getter/setter methods, not just properties. For example, myObject.getProp() and myObject.setProp() can be tweened like TweenLite.to(myObject, 1, {setProp:10}); and it will automatically recognize that it's a method and call getProp() to get the current value when the tween starts. Same for jQuery-style getters/setters that use a shared method like myObject.prop(). You can even tween another tween or timeline! For example, TweenLite.to(otherTween, 1, {timeScale:0.5}) would animate otherTween.timeScale to 0.5 over the course of 1 second. You can even scrub the virtual playhead of one tween/timeine with another tween by animating its "time". Use plugins like ThrowPropsPlugin for momentum-based motion, and RaphaelPlugin, EaselPlugin, and KineticPlugin for those [canvas or svg] libraries (Raphael, EaselJS, and KineticJS). Plus there are physics-based plugins like Phyics2DPlugin and PhysicsPropsPlugin as well as a fun ScrambleTextPlugin for Club GreenSock members. Flexibility winner: GSAP Conclusion jQuery eeked out a few decent rounds, but ultimately GSAP left it lying on the mat in a pool of its own blood. Of course we're slightly biased, but check out the facts for yourself. Kick the tires. Audition GSAP on your next project. See how it feels. If you only need simple fades or very basic animation, jQuery is probably just fine. In fact, its fadeIn() and fadeOut() methods are quite convenient. However, what happens when your client wants to do something more expressive? Or what if they start complaining that animation isn't smooth on mobile devices? Why not build on a solid foundation to begin with so that you don't find yourself having to rewrite all your animation code? If you want professional-grade scripted animation, look no further. To get started fast, check out our Jump Start tour. Update: there's now a jquery.gsap.js plugin that allows you to continue using jQuery.animate() but have GSAP drive the animations under the hood, thus delivering much better speed plus a bunch of new properties that you can tween (like colors, 2D and 3D transforms, boxShadow, textShadow, borderRadius, clip, etc.). Read more about the plugin here. Recommended reading: Main GSAP JS page jQuery.animate() with GSAP: get the jquery.gsap.js plugin! Why GSAP? A practical guide for developers Jump Start: GSAP JS CSS3 transitions vs GSAP: cage match Speed comparison 3D Transforms & More CSS3 Goodies Arrive in GSAP JS
-
Hello, I am discovering GSAP and I did an exercice with TweenMax, And I don't understand why I have to write : TweenMax.set('....', {transformPerspective: xxx}); If I write the same thing with TweenMax.to and it don't works ... Can someone tell me when we have to use the 1st one and the 2nd one ?
-
Hi there, I'm having an issue with GSAP creating lots of detached DOM items in chrome when a parent div is deleted during a tween, despite attempting to stop the tweens. When I do this using just JQuery and not include the GSAP plugin, no detached items remain. To view detached items in chrome I use the following under "Discover detached DOM tree memory leaks with Heap Snapshots": https://developers.google.com/web/tools/chrome-devtools/memory-problems/ Code is below, you'll need jQuery, GSAP, Tween Max and one image. 1) Check for detached items in chrome (you'll see a few that GSAP etc. has by default) 2) Click "Start Tween", the during the 10 second tween click "Stop Tween and Remove Div" 3) Re-check for detached items in chrome. You'll see more have been created. (i.e. not removed by the tween stop). Any help would be greatly appreciated, have switched GSAP for jQuery off in my code for the time being. <!DOCTYPE html> <html> <head> <title>Tween Test</title> <script src="../jquery-3.0.0.min.js"></script> <script src="../greensock-js/src/minified/jquery.gsap.min.js"></script> <script src="../greensock-js/src/minified/TweenMax.min.js"></script> <script> function TweenMe() { jQuery("#innerDiv").animate({ opacity: '0' }, 10000); } function StopTween() { jQuery("#innerDiv").stop(true, false); jQuery("#outerDiv").remove(); } </script> </head> <body> <button onclick="TweenMe();">Start Tween</button> <br /> <br /> <button onclick="StopTween();">Stop Tween and Remove Div</button> <br /> <br /> <div id="outerDiv"> <div id="innerDiv"> <img src="../media/img/red_square.jpg" id="imgMain" style="position:absolute;" /> </div> </div> </body> jquery.gsap.min.js jquery-3.0.0.min.js TweenMax.min.js
-
Hello! I'm trying to apply an animation to the same element in different time lines. But it works in jumps - without a smooth transition between the states of the element. I have a task to do animation with many elements inside one screen. I have several scenes that need to be run by scrolling or clicking on the menu. Under the link all works approximately, as it is necessary to me. One problem is that the animation does not go smoothly from the first state to the second state and then to the third. https://codepen.io/yuliarushay/pen/PBjeyN Thanks!
- 34 replies
-
- tweenmax
- horizontal scrolling
-
(and 3 more)
Tagged with:
-
I need to make working this functionality, basically I need to trigger the GSAP function when the element is in viewport. I'm adding the class and is going all fine, but then I need the function to work on the elements and animate them. I don't intend to use Scrollmagic
-
So for a school product I really want to recreate something like this, but the example here is using jQuery. One of the conditions of the challenge was to use the GSAP libraries, so jQuery is not allowed. Is there an easy way to make this kind of clock using GSAP? Is there fast way to replace jQuery with GSAP withing my js files? I'm a beginner so all the tips are welcome!
-
Hello, I am having a problem in creating a hover dropdown using GSAP animations to stagger in links after the container fades and drops in. After the user hovers off, it does another timeline in reverse. However, if a user were to go back and forth too quickly there are partial or full loops of the animations over and over depending on the swipes across the trigger. I am wondering if there is a way GSAP knows and animations are playing and will not allow another set to run if another is playing. Something along the lines of if tl starts and the user hovers off then it finish before starting timeLine's animation...? Thanks in Advance!
- 2 replies
-
- jquery
- .mouseleave
-
(and 4 more)
Tagged with:
-
How do I execute a function after an animation has completed? I've got a simple animation: I grab an element, and then I animate it. Lets say my animation function is called changeState(). I want to do this sequence: 1. changeState() 2. selectNextElement() 3. changeState() selectNextElement() should only run once changeState() has completed it's animation sequence. Here's my stub for changeState: // get current block and animate it function changeState() { var currentBlock = $(".current") ; // colortween the current block var tl = new TimelineMax() ; tl.to( currentBlock, 1, { backgroundColor:"rgb(205,151,20)" } ) .to( currentBlock, 1, { backgroundColor:"rgb(152, 129, 74)" } ) ; }
- 5 replies
-
- loop
- timelinemax
-
(and 1 more)
Tagged with:
-
Hello, I was trying to make a hover function with GSAP with timelinemax. In this, there are lists of elements which on hover will take up an x position and moves back to original position on mouse out. But, here, when I move the cursor in between lists items, the animation doesn't stop, but instead, it waits for the previous one to finish. Traditionally in jQuery, this is achieved through stop() method. What can we do here? and how do we do it? Thanks
- 3 replies
-
- function
- navigation
- (and 5 more)