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. Actually I am making a web app which part of it contains a touch swipe action in order to browse between different parts of a section in mobile devices of course, the elements which move after the user swipes will be dynamically added or removed; I have made a static version of this so far but I need to make sure it is capable of being dynamic, I have used hammer js for controlling swipe action and tweenmax js for handling the animation. My problem is that I do not know how to recognize which .chanel element is in sight so I can figure out which is the next one and which is the previous one (how to Pass that element to my timeline instead of writing too many timelines), Also I have to dynamically change my Timeline in a way that it sets the .chanel element left to -offset if its the previous one and sets to offset if its the next one for example. I hope I could describe my problem well. Thanks in advance.
  2. I had a need for controlling a sprite-sheet, with pause, play, and go-to-frame functionality. Also needed practice creating jQuery plugins. The result is jquery.gsap.sprite.js. Gitub: https://github.com/agrothe/jquery.gsap.sprite Demo: http://jsbin.com/quvuzo/6/edit?html,js,output Sample Usage: var mark = $(".mark").sprite({ frameWidth: 24, frameHeight: 70, sheetWidth: 120, imageSrc:"https://dl.dropboxusercontent.com/u/6801572/marksprite.png" }); // Pause the sprite mark.sprite("pause"); // Play the sprite mark.sprite("play"); // Resume the sprite from where it was paused mark.sprite("resume"); // Restart the sprite from the beginning mark.sprite("restart"); // Stop the sprite mark.sprite("stop"); // Goto first frame (0 indexed) and stop mark.sprite("seek", 0, true); // Goto thrid frame (0 indexed) and stop mark.sprite("seek", 2, true); // Goto thrid frame (0 indexed) and continue mark.sprite("seek", 2); A few advanced features are overrides for TweenMax and TimelineMax libraries, as well as passing in your own Timeline object for maximum control. Comments and suggestions more than welcome.
  3. Hi, im noobish, trying to include my first DrawSVG Animation in my existing website, which uses jQuery for a page-slide in for mobile. Ok, the DrawSVG Animation does not work when i just include all necessary GSAP plugins/scripts. As soon as i remove jQuery, the svg-animation works fine. Right before my closing body tags theres this script: <script src="js/jquery.pageslide.min.js"></script> <script> $(".open").pageslide(); </script> i tried just with: <script type="text/javascript" src="js/greensock/jquery.gsap.js"></script> <script src="js/jquery.pageslide.min.js"></script> <script> $(".open").pageslide(); </script> and lots off other stupid things... Could someone please help? thx in advance! P.S.: the website where the problem is: http://www.bertelot.de/ux.html if you resize your screen to about smartphonesize ( or use a smartphone) you can see that the menu icon doesnt do anything the other sites work http://www.bertelot.de/work.html
  4. So i've watched the GSAP intro videos; they're great. I mean they're so good they made me think I'd be able to use this library straight away. However I am new to coding and web design and while GSAP allows me to do things i'd never be able to imagine doing on the web I'm struggling to control the outcomes. In my codepen I'm trying to use the mouse hover events to initiate a simple tweenmax animation. I want the user to interact the pouring motion by just a mouseover but once the mouse leaves the bounds of the image it would go back to the starting position. I think my js coding is messy and not the best way to achieve this, and I think the revert or restart() functions might be what I should be doing, but i'm not sure on syntax or design. TL;DR. How can I use the timeline feature to revert the tween back to it's starting state upon the jquery mouseleave event?
  5. Has anyone tried to use the gsap jquery plugin with HighCharts. HighCharts animates as it displays the chart. The gsap plugin seems to break this animation. I created a quick jsFiddle from the stock HighCharts jsfiddle to demonstrate: http://jsfiddle.net/ptrenery/43n82tbn/2/ Is it not possible to use these two libraries together? Thanks, Peter
  6. when i was trying to create a website that uses jquery to link numerous iframes, jQuery('.open_contents').click(function() { jQuery('.board_contents').addClass('slideIn'); }) I found out that iframe cannot communicate with the parent window, and i was able to solve the problem with the following code by adding 'top.document' jQuery('.open_contents').click(function() { jQuery('.board_contents', top.document).addClass('slideIn'); }) but simply addingclass or togglingclass was not good enough for creating the animation that i wanted, so i moved onto Greensock. the question is how do i control specific div layer in the parent window, using greensock by clicking on a button inside an iframe? my code is this : jQuery('.open_contents').click(function() { TweenMax.to(".board_contents", 0.5, {opacity:1, top:200, ease:Bounce.easeOut}); }) my webpage is this : http://lifeto.dothome.co.kr/xe/page_FIsv96 and here is where i am. if you click on the first 'click me' button a board slides down, and then it was supposed to open a layer named '.board_contents' when click on the title '1', but is currently not working. do excuse my horrible english.
  7. 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
  8. 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.
  9. 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
  10. 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
  11. 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.
  12. 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?
  13. 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 }); }); });
  14. 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?
  15. 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.
  16. 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
  17. 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.
  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. 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
  20. 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.
  21. 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!
  22. 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
  23. 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
  24. 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.
  25. 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!
×
×
  • Create New...