Jump to content
Search Community

Search the Community

Showing results for tags 'jquery'.

  • 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


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hi all, This is my first time posting on these forums. I'm a regular browser but have yet to post! First off - love Greensock. It has transformed how I go about building and designing websites and applications due to the power of it. It really is awesome! My question today is quite broad, but if possible i'd love somebody to point me in the right direction as to how to complete it. I was wondering what's the best method to use a hover state to navigate around a div, both horizontally and vertically through CSS transforms. Would you have to give the div a strict width and height then navigate around that? The effect I'm looking to replicate is used here - http://www.jakobdeboer.com/gallery/series/ which i've noticed uses tweenmax to scroll through the div. I know this isn't a very specific question, but if somebody could point me in the right direction I'd be very grateful. Thanks, Oliver
  2. Hiya - this is my first question, and I hope it's not too dumb. I stumbled across Greensock while fiddling with Edge Animate. However, I'd like to hand-code some of this stuff. Unfortunately, I have virtually zero experience with Javascript. (I did take a class about then years ago, and I vaguely remember some concepts, but that's about it.) My familiarity is with plain-old HTML & CSS. My goal is to try and reverse an animation. Nothing spectacular. However, I don't even know where to start. I'm sure I can cut & paste and tweak, but I'd like a more solid basis. Am I in the wrong place? Thanks! J.
  3. Hi I am working on a website for a client which is basically an old flash site which I am translating into HTML with GSAP animation. The whole thing also uses parallax.js to create a layered 3d effect. This works great across all devices and moves when an ipad is tilted etc. My problem is that tweenmax is clashing somehow with the parallax javascript and causing the animations to jump or in the case of CSS opacity the fade does not work at all. When I remove parallax.js then it works just fine. So I did some research and then it occurred to me that it may be possible to create the parallax effect without using the plugin but through gsap itself and then it wouldn't cause compatibility issues. But although I can find examples of parallax controlled by mouse movement, there doesn't seem to be anything about creating this effect with device orientation/tilting etc Is this even possible? Thanks
  4. Hi once again. i've created my site and am using tweenmax&lite scripts alot and i'm loving it. My problem is; i've installed a plugin called Revolution slider and this slider has tweenmax embedded into it too. And a minor (but crucial) animation in my page is not animating as it suppose to on the page this slider is being placed in. The animation is site wide, footer show&hide which you can see easly from this page. http://goo.gl/VDQqNt (please click Expand to see link on the bottom). As you can see, the footer slides in the window is positioned on the bottom. Now please check the same animation on this screen. As you can see the footer appears but the window wont move to the location. And this small bit is the headache that my clients are hell bent on giving me. I've contacted them and trying to solve this issue but i strongly suspect that this is the cause of the tweenmax scripts being loaded again and again. So my question is, is there a jquery no conflict equlivent for gsjp ? (since i'm assuming its conflicting some how) Also any suggestion on the topic is much apriciated. Lastly, this is the code i'm using var callback3 = function () { $("#main-content").css( { 'min-height': ($(window).height()) - 185 } ); $("a#footer-toggle-link").click(function() { var markerPos = $("div#copyright-line").offset().top; TweenMax.to(window, 2, {scrollTo:markerPos, ease:Quad.ease-Out}); }); }; $(document).ready(callback3); $(window).resize(callback3); Thanks alot.
  5. So, I'm trying to build a slideshow that uses GSAP. But I'm wondering... do I do EVERYTHING with GSAP? One thing I'm trying to use right now is jQuery's addClass. The class I'm adding basically makes something visible. Can I continue to use that to show my slide? Or do I need to use GSAP to get the performance boost?
  6. GreenSock

    jquery.gsap.js

    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.
  7. So I found a tutorial here: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641 That makes parallax scrolling very simple and easy to understand. I want to take the javascript from the tutorial and apply GSAP. Not sure how to do that however.. The JavaScript from the tutorial. I'm sure it's easy but it would probably take me hours of playing with it where someone here has probably done it already or could do it in a minute or two. var $window = $(window); $('section[data-type=background]').each(function(){ var $bgobj = $(this); // assigning the object $(window).scroll(function() { var yPos = -($window.scrollTop() / $bgobj.data('speed')); // Put together our final background position var coords = '50% '+ yPos + 'px'; // Move the background $bgobj.css({ backgroundPosition: coords }); }); });
  8. I see that GSAP hijacks JQuery's animate function, but this is causing issues with existing code that I have. For example: $(".object").live("click", function () { $(this).animate({ opacity: 0 }, function () { console.log($(this)); $(this).slideUp(); }); }); How it operated before GSAP: Click on the object, it animates it's opacity down to 0 and then slides up once the opacity animation is done. After GSAP: It animates its opacity down to 0, but then fails to run the slideUp. I used a console.log of what $(this) is in the callback - before GSAP, its a JQuery object, but afterwards its some new GSAP object that can't itself be animated. I then get an error: Uncaught TypeError: Cannot read property 'defaultView' of undefined I don't want to go through all of my code and change things to fit GSAP - how can I either fix this, or stop GSAP hijacking JQuery's animate plugin?
  9. I have a function which draws lines using kinetic.js and canvas. I'm trying to find a certain argument from the function and write that argument to the console when I click on each line. How would I go about doing this? FYI, I'm trying to get the argument outside of the function. Kinetic function drawLine(name, points, fill, stroke, closed, strokeWidth){ window[name] = new Kinetic.Line({ points: points, fill: fill, stroke: stroke, closed: closed, strokeWidth: strokeWidth }); } drawLine("NST_R01", [938.4, 258.167, 868, 258.167], "", red, "", 3); The argument I want to get is the name argument.
  10. I'm using the greensock animation library to animate the translateZ property of an image. This is my code: $("<img />") .attr({ src: piece, class: "pieces" }) .hover(function() { tl.to($(this), 1, {transform:"translateZ(1px)"})}, function() { tl.fromTo($(this), 1, {transform: "translateZ(0px)"}) }) .load(function () { _stageElement.append($(this)); }) } But instead of stopping at 5px it flies completely off the screen. Does anyone know what's happening here and why? Also if it's important after the image flies off the screen, it comes back to its original location, but the hover property doesn't have any effect anymore. I'm not sure if this is a greensock issue or a jquery issue. Here's an example to see what I mean http://richbaird.net/3dFlip/fip.html
  11. I'm a seasoned flash developer who's done a lot of flash banner. Have been asked to look into doing an HTML5 banner, and since I know a fair amount of Javascript, some jQuery, GSAP, etc, I think I can do it. This is a concept banner, the ad agency doesn't really know what they're doing, so I don't know if what they want is possible. I also must admit, I don't see the forest for the trees as far as creating HTML5 banners, never having done it, so any help on how to best-practice it would be helpful. Specs are: "One 300x250 unit, does not expand, HTML5, 40k initial load (we can do 50k if it helps), 61k subsequent load (polite), 30 max animation, 24 fps, 3 loops max." * the animation they want originally was a flash animation, a little cartoon with many moving images, text — a typical flash banner ad — including little action figures hitting each other (it's an advertisement for an online game). Obviously the animation would be fairly crude, I told them that, but what does one do? Just set up divs and tween around? Would one want to use canvas at all? Can GSAP work with canvas? * what does file size mean in the HTML5 world? All the HTML, JS, CSS files plus images? I assume GSAP will do fine, but jQuery too? Coming from Flash, I really don't want to worry about browser issues (I know nothing about them), so jQuery keeps it nicely abstract. * they asked if HTML5 allowed video and suggested layering that in to show the figures fighting. This seems needless complex and size-intensive, no? In any case, I've done a zillion flash banners with GSAP, but am not too clued in how to make an HTML5 banner work the best way. There are a lot of tutorials out there, and I've looked at some, but they all seem very different in their approach; and the client wants this done very quickly, so I'm keen to leverage my Flash knowledge and make the transition to HTML5. Any help much appreciated.
  12. I wonder, it's this possible. I've been reading about how good is this platform and I also read about how this plugin could improve performance even though it's a JQuery native code.
  13. Hi, I have been struggling with jquery animate jaggy animation anf I came across gsap. I checked your online jquery plugin demo and I can see that it has improved a lot compare to native jquery. I tried to use it on my page but it I don't see noticeable change on my animation. Here is my comparison version http://prompter.rareapps.org/prompt/jqueryscroll.php?p=123 http://prompter.rareapps.org/prompt/gsapscroll.php?p=123 Did I do something wrong that makes gsap not firing or my scroll animation wont improve even with gsap? Please let me know if my jerky scroll animation can be smoothen by gsap. Thanks
  14. Hello everybody, so far I am loving this plugin it is a great tool and this site is a great resource and I appreciate all the work that has been done in delivering such a great tool. I have a timeline that I created. The timline is not really that important. Just in case though: var tweenArticle = new TimelineMax() .from($('header.food_header > hgroup'), 3, {opacity:0, top:'-40px', ease: Power4.easeOut},0) .from($('article.food > section > summary > p'), 3, {opacity:0, top:'40px', ease: Power4.easeOut},0); This is the site I am trying to put it on: http://webshowcase.tk/wp1/?page_id=114 This is a wordpress site and what I am trying to do is affect every post on the page. When The article is in the viewport I would like to start animating just the elements in that article and if possible reverse but reverse is not super important at the moment. I can't seem to figure out how to get my timeline to play when the article is in the viewport. Any help would be greatly appreciated. Thank you.
  15. Hello - My last thread became a new topic so I'm starting one specific for this one. Here is the original thread: http://forums.greensock.com/topic/8978-animated-rollovers-not-functioning-properly/ So I'm trying to use JQuery (document).ready to load some tweenlite rather than window onload. This isn't working so far, I know the tweenlite works because it's working with window.onload - here is the code: <body> <div id="container"> <div id="lens_flare"><img src="images/lens_flare.png" /></div> <div><img src="images/new_season.png" id="share" /></div> <div id="love"><img src="images/new_you.png"></div> <div id="my_logo"><img src="images/my_logo.gif"></div> </div> <!--- The following scripts are necessary to do TweenLite tweens on CSS properties --> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> jQuery(document).ready(function(){ console.log("DOM is ready"); jQuery(window).on("load", function(){ console.log("window is loaded"); TweenLite.to("lens_flare", .25, {alpha:1, scaleX:1.2, scaleY:1.2, delay:1}); TweenLite.to("lens_flare", .25, {alpha:0, scaleX:1, scaleY:1, delay:1.25}); TweenLite.to("container", 1, {autoAlpha:1, ease:Quad.easeIn}); TweenLite.to("share", .75, {delay:3, alpha:1}); TweenLite.to("love", .5, {alpha:1, delay:3.5}); TweenLite.to("my_logo", .75, {left:0, alpha:1, delay:4}); }); }); </script> </body> This displays as blank. Any help? Thanks!
  16. Hi! I'm new to the GSAP But love what I have seen so far. I'm having a little problem with animating transform rotateX and rotateY. I'm using the GSAP jQuery plugin. Basically executing this: $(element).animate({transform: "rotateX(-180deg)"}); has the same effect as executing: $(element).animate({transform: "rotateX(180deg)"}); I do have perspective set up, in case you were wondering. Is there a special way I have to define negative values or is this a bug? Thank you guys! Kyryll
  17. Quick question and sorry if it's been answered... If I simply want to add/remove a class name to an element, would performance be better using: TweenMax.set($('.mydiv'),{className:'+=myclass'}) Or jQuery's $('.mydiv').addClass('myclass') I regularly use both libraries so I'd like to start using the more optimized for this common task. Thanks! PS, wrote this on iPad so didn't have access to the WYSIWYG code tool
  18. Well, I just wanted to give back a little bit to this great community. I've combined two pieces of code to obtain very easy pixel level collision detection. It may not be "perfect" but it seems fairly accurate. Another post on the forum reference jQuery-Collision plugin, which is really efficient at providing fast rectangular detection. It of course, suffers when your images do not resemble boxes. I found this great little piece of code that does pixel level collision detection on canvas objects. Combining the two gives us a nice two layered approach to first determine if objects bounding boxes collide, then get nit-picky about the pixels. So, include both files above, drop a canvas layered below your jQuery objects with the same width & height as your stage and do the following in your game loop/update function: var breakable = player.collision( ".asteroid" ); // jquery-collision if(breakable!==null&&breakable!==undefined&&breakable.length!==0){ // first test bounding box // draw player and enemy on underlying ctx canvas context2D ctx.drawImage(player.get(0), player.position().left, player.position().top); var roid = $(".asteroid"); ctx.drawImage(roid.get(0), roid.position().left, roid.position().top); // get imageData from just the areas we need to check var imgD1 =ctx.getImageData(int(player.position().left), int(player.position().top), int(player.width()), int(player.height())); var imgD2 =ctx.getImageData(roid.position().left,roid.position().top,roid.width(), roid.height()); // now test pixel collisions if(isPixelCollision(imgD1 , player.position().left,player.position().top, imgD2, roid.position().left, roid.position().top, false )){ collide(hitTests[i].id); } ClearCanvas(); // ctx.clearRect(), so we don't leave images behind } I took this from my code, but I think the idea is pretty clear. Combining existing code gives us a pretty decent collision detection. Also, I have found that using the layered canvas allows me to draw some nice effects behind my jQuery objects while still using DOM elements to create a game. I've found that some mobile devices have trouble with straight canvas games so I think this allows me to "turn off" certain effects fairly easy. Hopefully this helps someone while creating a demo / proof-of-concept without spending a ton of time on things like collision detection. At some point, I'll get this in a nice blog post. Cheers, Andrew
  19. Check it out its in beta right now for the public but I have been using it for a year and a half. I made a super light weight version of jquery thats way faster and lighter. It has what you need and nothing you dont. This has been stable in all my projects for a while now in ie7+ https://github.com/Lbox/minowjs
  20. markthema3

    jQuery Sizzle?

    Is it possible to use jQuery's Sizzle selector library (http://sizzlejs.com/) as an alternative to using the CSS and CSS Rules plugins? It seems like the CSS Rules plugin is trying to do what Sizzle does but doesn't do it as well.
  21. I'm making the switch from Flash to GSAP HTML5 animation and want to really make sure I'm doing this the best way. Right within my html doc I have a series of animation that utilize TimelineMax so that I may loop the entire set of animations. I have a few questions about these. First of all here is the code: <script> window.onload = function(){ var tl = new TimelineMax({repeat:2, repeatDelay:3}); tl.add( TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn}) ); tl.add( TweenLite.to(my_films, 1, {width:177, height:44, alpha:1, ease:Power1.easeIn}) ); tl.add( TweenLite.from(season2, 1.5, {alpha:0}) ); tl.add( TweenLite.to(grantland, .5, {x:19, alpha:1}) ); tl.add( TweenLite.to(packshot, 2, {alpha:1, ease:Power4.easeIn}) ); tl.add( TweenLite.to(holiday, 1, {alpha:1}) ); tl.add( TweenLite.to(starts, .75, {alpha:1}) ); tl.add( TweenLite.to(buy, .5, {alpha:1, top:142, ease:Back.easeOut}) ); } </script> Is there a more optimized way to load these? I know that window.onload = function(){ isn't the best way - I heard that document.ready could be a good way but having a hard time getting that work. Further more I can probably scrap the TweenLite reference all together and just use tl.to, is that correct? Also right now I'm pulling in the entire TweenMax library in this manner: <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script Is there a way to only load the select things that I need and therefore save on file size? Please advise. Apologies for the noob questions! Thanks in advance for any help!
  22. I'm happy to say GSAP has given me hope again. I switch from jQuery animations (and some css3 jquery plugins) to GSAP tweens and instant performance gains! However, I'm still not happy with the performance I get on my Samsung Galaxy S2x. It's a pretty decent phone so I know it has the power to play some high end games. I think using phonegap's browser plugin caused some issues, but even using mobile chrome the performance is choppy and not good enough for a production app. Of course, I could be doing something very wrong as I'm new to the mobile HTML5 scene. I'm hoping someone might be able to help determine if my issue is animation related or just bad code in general. My animations are pretty simple: TweenLite.to(jem, animationSpeed, {top:(blockSize*row)}); It's maybe all the other stuff that gets in the way? I've put everything in jsbin for easy viewing in browser and on mobile devices: http://jsbin.com/uyAXume/9/edit Thanks for any help or pointers.
  23. You can animate ANY numeric property of ANY JavaScript object – it’s not just for DOM elements. So yes, you can animate canvas objects, EaselJS assets, and pretty much anything JavaScript-related. In fact, GSAP even has an EaselPlugin to make it easier to animate EaselJS properties. If you need to run logic after each refresh (like to redraw things on the canvas), either use an onUpdate on the individual tween/timeline or add a “tick” event listener to the core Ticker that drives the platform.
  24. Hi all, I was wondering if there is a way to move a draggable by clicking another element? I've created a horizontal slider similar to the jQuery Mobile Slider. There are several "snaps" along the way. I would like to move the draggable to one of these "snaps" by clicking a button. The problem with simply tweening the draggable... When dragging, the draggable stays within the bounds (specifically when dragged all the way to the right). I suspect it is auto calculating a negative margin. However when I tween the draggable to the far right, it goes out of the bounds. I could implement my own negative margin calculation but was hoping there was a built in way to do this. Thanks for any help!
  25. CarlosMav

    jQuery error

    Hi, im using split text, this is my code: var tl = new TimelineLite({delay:0.9}), mySplitText = new SplitText(jQuery('.st1'), {type:"words,chars"}), chars = mySplitText.chars; //an array of all the divs that wrap each character TweenLite.set(jQuery('.st1'), {perspective:400}); jQuery('.st1').css("opacity","1"); tl.staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut}, 0.01, allDone); function allDone(){ mySplitText.revert(); } And it is giving me this error: Uncaught TypeError: Object [object Object] has no method 'getElementsByTagName' on splittext.min.js I know it has to be something silly but i just cant see it. A fresh eyes on the problem could help me. Thank you.
×
×
  • Create New...