Jump to content
GreenSock

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

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

  • FAQ Landing Page

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

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. 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
  2. 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 the
  3. 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
  4. 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
  5. 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 para
  6. 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 t
  7. 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?
  8. 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 o
  9. 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
  10. 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
  11. 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
  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. 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 objec
  14. 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 anima
  15. 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/
  16. 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" /&g
  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. 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
  19. 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.
  20. 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,
  21. 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 migh
  22. 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 imp
  23. 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 metho
  24. Hello All, My question has to do when using the tween target. I know as far as speed that targeting elements in the DOM by ID is faster than targeting a class. I know to use document.getElementByID() when i need to target a ID. But when it comes to other selectors ( like classes, attribute selectors, etc... ) GSAP knows to add the jQuery $() if jQuery is included in the page. So my question is... What is faster... to omit the $(), or include it: ?? // jQuery is loaded in the page // Which is faster ? // without the $ TweenMax.to(".myClass", 2, { color:"#FC0"}); // with
  25. Why Tweenlite does'nt apply to ul:{jquery object, filled} the transformation in this case : TweenLite.set(ul, {css:{transform: 'translateY(-4000px)'}}); But this work as it should be with TweenLite: ul.css('margin-top', '-4000px'); JSfiddle description : JSfiddle I use the latest version of TweenJs. Thanks for your help.
×