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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Hi there I have a nav that links to slides with tweens in between. The slideshow navigation works fine by loading each slide according to it's position on the list. See the following pen http://codepen.io/mulegoat/pen/ruHhD The problem I'm having is trying to link to a certain slide from within each slide. Using the following code works on all but one "Link to page 2" link - in this case, the link within the first slide - but on my localhost its slide 5 where the link fails. I know this is more of a jquery issue but though I'd put it up here incase somebody had a better way of doing this with getElementById or something else. Many thanks for any help function initActionPlan() { $(".actionPlanLink").each(function(index, element) { $(this).on("click", gotoActionSection); }); } function gotoActionSection(e) { if(currentSectionNum != $(e.currentTarget).index()){ if(currentSection) { TweenLite.to(currentSection, 0.5, {autoAlpha:0}); } currentSection = $(".tabsContainer")[1]; TweenLite.to(currentSection, 0.2, {autoAlpha:1}); } } //OpenClose Action Plan function actionInit(){ initActionPlan(); $(".actionPlanLink")[1].click(); } actionInit();
  2. what is faster.. using jQuery css() method or GSAP set() method. for example: // GSAP way TweenMax.set($image, {'opacity':1}); // or jQuery way $image.css('opacity',1); I was wondering which is faster or better to use? Should i only use set() for the properties that will be animated? Im used to setting css properties via jQuery css() method .. but wanted to know if the GSAP set() method is faster or more efficient? Any help will be highly appreciated?
  3. Hi, How can I get the actual width of an element after scaling it with Tweenmax? Example: $('#myDiv').width(100); // Sets width of #myDiv to 100; TweenMax.set($('#myDiv'), {scale:1.2}); console.log($('#myDiv').width()); // gives 100 instead of 120 How can I get the actual width of the div? Thanks a lot in advance, this thing is frustrating me and breaking my head today...
  4. Hello again, I'm now moving on to the menu. How do I setup the menu (styled it etc..), so what I want is that once you click on a menubutton it auto scrolls down to that page/section. And my question is. How do I do that? Because when I look at the demo of this I don't see any demo with an actual functioning menu. There is a lot about effects and animations, but nothing in it about how to make all of that work with a navigation also. Does anyone got some kind of tutorial on 'How to make a menu that scroll to page/section'? Maybe there is a tutorial somewhere that I have missed?
  5. I'm just getting started with gsap. I've created a simple script, but for some reason I can't get it to actually do anything. I'm getting zero results in both firefox and chrome on linux. What am I doing wrong? Here is the html source... <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="UTF-8" /> <title>greensock test</title> <meta name="description" content="gsap test" /> <link rel="stylesheet" type="text/css" href="/css/test.css" /> <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/js/TweenLite.min.js"></script> <script type="text/javascript" src="/js/gsap-test.js"></script> </head> <body id=""> <div id="outer-wrapper"> <header id="page-header"> </header> <!-- page-header ends --> <section id="main-content"> <h1>GSAP Animation Library Test</h1> <section id="testing"> <p>Lets see what he can do with Tweenlite</p> </section> </section> <!-- main-content ends --> <footer id="page-footer"> </footer> </div> <!-- outer-wrapper ends --> </body> </html> And here is my js: $(document).ready(function() { $("p").click(function (){ var $target = $(this) ; TweenLite.to( $target , 1, {backgroundColor:"#000"} ) ; console.log("clicked"); }) }); All the libraries load. Firebug returns no errors. When I click the <p> element, I get the console message, but nothing else.
  6. Hello! First of all, I know that this is not necessarily the right place to be looking for answers regarding SuperScrollorama since it's completely separate. But it does seem as though this is a good place to at least ask the question. I'm trying to design a single-page site, and have run into a problem. The effect I'm aiming for is: A fixed, centered <ul> navigation at the top of the page. On scrolling down, the menu will break apart between the 3rd and 4th <li> and create a space of 250px, into which the logo will scroll (and shrink) and then remain for the duration. I'm achieving the effect by adding a margin-right to the third <li> element, and this is what i want to be animated against the scroll position. However, although the page loads correctly, with the margin-right at 0, as soon as the page starts to scroll the margin-right jumps straight to a number around 180px, before scrolling smoothly for the duration that I need it to. Then, on scrolling up, it animates smoothly but only returns to the random 180px value instead of 0. Here's a JSfiddle: http://jsfiddle.net/aTz4X/5/ It's just that initial jump that's the problem. I've been trying to figure it out for days, but can't get to the bottom of it. Any help or pointers would be much appreciated. Rob
  7. Hi guys, Thanks for an amazing product. I wanted to get some advice on the best way to handle what seems to be a recurring issue for me. I always try to OOP all my animations/tweens as much as possible. One issue i keep running into that I haven't gracefully figured out how to handle is when a tween is not completely finished and another tween on the same object fires. Normally in jQuery using animate(), I would just chain in .stop(false,true) to basically stop the tween right there, clear the animation queue and then start the newly fired tween using the element's current state as the starting properties of the new tween. Right now im sniffing around the invalidate() method as possibly being a solution for this but am not totally sure. Thanks in advance!
  8. I'm asking, because I'm trying to make that works inside Edge, but there's no results. I tried to go with several versions of this code from official plugin website: $(document).ready(function() { var controller = $.superscrollorama(); controller.addTween('#fade', TweenMax.from($('#fade'), .5, {css:{opacity:0}})); }); but non of them seem to do anything correctly. In example, if I do something with: var controller = $.superscrollorama(); and change it to: var controller = sym.$("superscrollorama"); then Edge seems to ignore almost whole code and acts like there is only the TweenMax.to function. If there is anyone who knows the answer to solve this problem, please, be so kind. But first of all, I want to say hello to all of You here as a new user of this forum.
  9. Im using superscrollorama on one part of my website, that works fine, but I want to implement a different animation further down, but it just wont work! Please have a look, NB it is still early in developement, so try not be too harsh The About us/Testimonials works fine, but it wont work on Services/Portfolio. I replicated the About us code exactly, but it still wont work! Here is the site http://vertex3.vertexwebdesign.co.za/ And here is my code http://pastebin.com/e4Ax5d0F please guys, going mad! Javascript isnt my forte, but trying my best here!
  10. I've been looking for a better way to code and animate Accordian's to unleash some creativity. I've been playing around with GSAP a lot lately trying to do some of the cool animation effects I have liked in flash using GS), and making them browser compatible. I thought of a cool way to do accordians that you have total visual control over. All of the other JavaScript one's or the SPRY assets that I have used in the past, have been very confusing and not very graphically customizable -as well as not very browser friendly. This is my start of one that I feel can go just about anywhere, in any direction (including diagonal) thanks to Mr. Green. I used super simple CSS. I added in an alpha change because the objects inside of the div would stay visible and cover stuff, but there is probably a much better way to do it. Here is the start of the simple code I came up with so far, let me know what you think: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> .containers { /* [disabled]margin: 10px; */ /* [disabled]float: left; */ height: 507px; width: 421px; position: absolute; background-color: #0F0; display: inline-table; white-space: normal; } .boxes { background-color: #FFF; float: left; height: 50px; width: 400px; position: relative; margin-right: auto; margin-left: 10px; } </style> </head> <body> <div class="containers"> <div class="boxes" id="a"> <div align="center">a</div> </div> <div class="boxes" id="a1"> <div align="center">a-1</div> </div> <div class="boxes" id="b"> <div align="center">b</div> </div> <div class="boxes" id="b1"> <div align="center">b-1</div> </div> <div class="boxes" id="c"> <div align="center">c</div> </div> <div class="boxes" id="c1"> <div align="center">c-1</div> </div> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/greensock/minified/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/greensock/minified/easing/EasePack.min.js"></script> <script type="text/javascript" src="js/greensock/minified/TweenLite.min.js"></script> <script type="text/javascript" src="js/greensock/minified/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/greensock/minified/plugins/CSSRulePlugin.min.js"></script> <!--start events--> <script> $(document).ready(function () { TweenLite.to(a1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(b1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(c1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); }); $("#a").click(function() { TweenLite.to(a1, 1, {css:{height:50, alpha:1}, ease:Cubic.easeOut}); TweenLite.to(b1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(c1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); }); $("#b").click(function() { TweenLite.to(a1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(b1, 1, {css:{height:50, alpha:1}, ease:Cubic.easeOut}); TweenLite.to(c1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); }); $("#c").click(function() { TweenLite.to(a1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(b1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(c1, 1, {css:{height:50, alpha:1}, ease:Cubic.easeOut}); }); </script> </body> </html>
  11. Hi, I have a grid of 6 boxes. I'm trying to get it so that when you click on a box it scales up and centres itself in the middle of the parent div. Here is what I have so far: http://codepen.io/hrk/pen/yJIBn I think I can get the current position of the box using .offset() I'm fairly new to JS and tweenMax - Can anyone point me in the right direction? Thanks Neil
  12. I was wondering about the best way to handle a jQuery resize event when a user resizes the browser window. I am using TimelineMax and currently I am pausing the timeline, moving it to the very start of the timeline and then removing the timeline object, initializing a new one and rebuilding the timeline each time the browser resize event is fired. I was thinking there might be a better way to do this. I found this answer on StackOverflow here. Having said that, this solution works, but it moves the timeline to the start every time. If I try and resize the window and pause the timeline at the current time of the label it gets thrown off? If I simply try and remove the timeline and rebuild it with a new object, it gets thrown off also? I had seen something about a liquid stage? Is this available on the JS version, or maybe there is something I am overlooking? Here's my resize code: $window.on('resize', function(){ var time = 0; if(globalLabel != "") time = controller.tl.getLabelTime(globalLabel); //time would be used to pause the timeline but it does not work clearTimeout(id); controller.tl.pause(0,true); controller.tl.remove(); //on the Update view call, I am creating a new timeline object //and rebuilding the timeline id = setTimeout(controller.UpdateView, 150); }); I appreciate any help.
  13. Now, it seems that i'm doing it all wrong..or not... Do i need to load the Jquery lib first or not? As i understood, gsap is 'selfsupporting' so i thought there is no need to load in jquery. But then how do i use the selectors? I seems that i can not use the $ selector ( '$ is not defined') ; How can i use $(document).ready(function() ? i'm loading the files from cdn : CSSPlugin.min.js , EasePack.min.js and TweenLite.min.js
  14. Hi, there— I'm hoping someone can help suss out what I'm doing wrong. I have a page that has 2 blocks of content with a couple of <li> elements to toggle between the two, like tabs. I'm using TimelineLite to show the first block, and—when toggling to the other block—TweenMax to hide the first block's elements and TimelineLite to transition in the second block's. What happens is page loads, first block appears. Toggle to 2nd block. 1st block is hidden, 2nd block appears. When I toggle back, 2nd block is hidden, 1st block appears BUT proceeds to disappear; it doesn't stay visible. The parent, #section0 is set visibility: hidden in the css and I'm using TimelineLite and TweenMax to do the hiding/revealing of the children only. For simplicity sake, I'll show only TimelineLite's first element being tweened. var tl0 = new TimelineLite(); tl0.to($('#section0 h2'), 1.2, {autoAlpha: 1, ease:Power2.easeOut}); //then my click handler: $('#subNav').on('click', 'li:not(.selected)', function() { $('#subNav li').removeClass('selected'); $(this).addClass('selected'); var idx = $('#subNav li.selected').index(); switch(idx) { case 0: //hide block 2, then show block 1 TweenMax.to($('#section1 h2'), 0, {autoAlpha: 0, overwrite:'all'}); var tlA = new TimelineLite(); tlA.to($('#section0 h2'), 1.2, {autoAlpha: 1, ease:Power2.easeOut}); //Block 1 then disappears. break; case 1: //hide block 1, then show block 2 TweenMax.to($('#section0 h2'), 0, {autoAlpha: 0, overwrite:'all'}); var tlB = new TimelineLite(); tlB.to($('#section1 h2'), 1.2, {autoAlpha: 1, ease:Power2.easeOut}); break; default: break; } }); Thank you in advance! —Victor
  15. Hello, I'm new here. I'm redesigning my personal website and I wanted to make the current position of the social icons change to be part of the header once they are scrolled over. I wanted some type of animation timing effect that was triggered by the position on the page. This is my first time playing with Tween and Timeline, so I'm really a novice as to how things work. I've been playing with it, but all the extra effects will most likely be removed once I figure out exactly what it is I need and whether or not Tween can handle it. So here it is: http://marlonstevenson.com
  16. shunryu111

    expandable div

    hi.. i'm trying to animate a div expanding and collapsing by animating the css height property with TweenMax TweenMax.from(testDiv, .35, {css:{height:0}, ease:Cubic.easeOut}); this only animates the background of the div it seems.. not the text that's in it. the text is always visible. here's the div <div id="testDiv" style="position: absolute; background-color: rgba(255, 0, 0, .5); width: 320px; height:260px;"> </div> i've tried jQuery slideDown() and this works hiding and revealing both background and text content any ideas? i'd rather use TweenMax for this
  17. UPDATE: Arggh. I am tired. Pesky quotation marks! I may be just tired today, but this is throwing me -- I'm getting a syntax error on the following line. I'm trying to tween multiple objects returned by jQuery to 0px (this is the ubiquitous accordion menu — I'm trying to replace jQuery slideUp and slideToggle with GSAP equivalents) TweenMax.to($('#nav li ul'),0.25,{css:{height:0px}}); Can GS parse the return of a jQuery selector that returns multiple values? I had thought so -- I'm probably missing a parenthesis, and I apologize if I am, but I don't see it!
  18. Using jQuery and greensock together. Recently I designed a site and I worked VERY hard on the animation using greensock. I love it btw. However, I showed two friends that they had old browsers and when they clicked the links they did not even go to the right pages, they did nothing. My heart hurts that they can't see the animation but hurts more knowing they can't see the content because the links don't work. On another browser, firefox old version. 3.0 I think. They buttons worked but the video box did not animate and stayed on top so it messed up content below. My question: Is there a way to detect if they have javascript or some other work around so at least the links can work and in this case the video box will go away, so they can at least see the content? Here is the website I am talking about. See how the video box jumps off screen when you click a link, well its suppoed to, but not for all does it work. If not perhaps I can redirect them to a page that says... sorry you can't view this content you need to update your browser. http://www.BeauBird.com/hope.php Thanks for your help or suggestions so my work can be seen by all. -PapaDeBeau
  19. Hi, I am looking for a commercial version of your product. Is there an easy way to test GSAP on existing jQuery based application without rewriting the entire code? From what I saw in the demos jQuery selectors are supported. Now one would only need to create a plugin, say jQuery.GSAP_animate to keep the pattern of jQuery.animate(properties,options), same thing for stop([clearQueue ] [, jumpToEnd ]); any hints to alpha, beta versions of such a wrapper or other solutions are highly appreciated as well. Thanks.
  20. I'm new to JS/CSS (coming from AS3) -- I wonder if someone could help me figure out the following: I'd like to have tabs at the bottom of a page which, when rolled over (or clicked) slide up. The tabs will contain images of 45px height. I'd like, say, the extended tab to be something like 100px in height. I gather this has something to do with overflow, hidden, auto, etc -- I've seen solutions using jQuery slide, but I'm not sure how to do it with Greensock -- that is, I am well-versed in the GS engines, but putting it all together (CSS, DIVs, overflows, etc) is throwing me. Any help much appreciated!
  21. Quick question here, sorry if this is answered somewhere else (couldn't find an answer). Simplified scenario... Let's say I have a div "#container" with an image inside it. Then I attach a tween to the image which rotates it infinitely. Then... using jQuery, I replace the contents of #container with a new image. Will the Tween that was attached to the original image (which is now gone) continue to eat memory, or is it now eligible for garbage collection? Do I first need to "Kill" all of its tweens before removing it? My real situation is much more complicated but that is the general idea. Thanks!
×