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. I am trying to make an coverflow slider like used on the HomePage of this website http://www.onedayinmyworld.com/. For reference, I am sharing the codepen demo of my progress and there are a lot of things with which I am struggling. I want to add dragging feature to it with center element highlighted i.e active class added to the center div. Can anyone help in solving this problem?
  2. Hey everyone, thanks in advance for your time. I've searched the forums for common solutions, but i'm a bit too new to JS to translate the more complicated ones into my simple task. I'm currently trying to get the animation in the provided codepen to work with the included mouseover feature correctly. If you try and mouseover while the animation runs, you'll see that the text elements fail to tween in by the time you mouseleave. I've searched the forums for solutions, but i'm still pretty new to JS so i'm rather dense as to how to use the isActive() function, which I assume would need to be used to prevent the mouseover working until all the intro elements have tweened in. To replicate this, try to mouseover straight away on the provided codepen, and you'll see that the text fails to appear from the intro animation. I've annotated the codepen, but here's the mouseover part. var wwdtransition = new TimelineMax({paused:true}); wwdtransition.to ('.screenobject',0.5,{y:300, autoAlpha:0}) .to('#playbutton', .3, {autoAlpha:1},"-=.2"); ; //mouseover functions $(document).on("mouseenter", ".col-md-12", function() { wwdtransition.play(); }).on("mouseleave", ".col-md-12", function(){ wwdtransition.reverse(); }); Thanks again for your time, i'm really enjoying using GSAP, and with a solution to this, I imagine I can just copy + paste it to replicate the effect in future work.
  3. I have a lot of SVG stars that i'm trying to animate. The first time it looks very nice, up to the part where it repeats. It starts at the original position but I would love to make it look like stars are raining from the left to the right infinite times, any tips? I have added a Codepen URL
  4. 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.
  5. Hey everyone. I am building a website using a drag and drop menu where a new page is opened when an element is dragged and dropped on one of the menu pages icon. It's been working alright for a while until today. It just takes me to the new page but page content doesn't load. This happens only in firefox. Everything works perfectly on all other browsers. I keep getting this error on firefox - NS_ERROR_FAILURE: TweenMax.min.js:15. I'm confused as at this point , I don't know how to move forward. Can someone help?
  6. Hello I am able to scroll the div from right to left side but I have to display the div linearly when scrolling the mouse wheel.The current code is not displayed liner. I mean I have to display smoothly from right to left. TIll now I haven't used GSAP. Would you help me out in this? https://jsfiddle.net/Narendra2015/3s5su2q3/
  7. I'm trying to have the expanded container on a full width. I was wondering if there's a way with GSAP. My full-width container once active should expand full width. Bu also should push the content below. So it can't be positioned absolutely. Please click any product, the expanded content should be full width, max-width:1200px. Any what I can Achieve it in GSAP?
  8. Is working quite ok, the only requirement is making the buttons to animate with GSAP instead than css. On click I should make the button active with width and height 96px. By default the first element should be always active. I put together this code (is not on the demo ) which is not working fine. $(".app-promo-img-align:first").addClass("active"); TweenLite.to('.app-promo-img-align.active a', 0.4, {width:'96px', height:'96px'}) var button = $('.app-promo-images').find('.app-promo-img-align') button.onclick = function(e) { e.preventDefault; $(this).addClass("active"); $('.app-promo-img-align.active').removeClass("active"); if ($(button).hasClass('active')) { TweenLite.to('.app-promo-img-align.active a', .5, {width:'96px', height:'96px', ease: Power3.easeOut }) } else{ TweenLite.to('.app-promo-img-align a', .5, {width:'80px', height:'80px', ease: Power3.easeOut }) } }
  9. I'm new to GSAP and I'm thinking about using the jQuery plugin to replace jQuery's .animate() capability (https://greensock.com/jquery-gsap-plugin). I'm wondering if that also replaces things like .fadeIn() / .fadeOut(), and/or jQuery's other transitions such as .toggle("blind") etc. I imagine that most of these are just shortcuts for jQuery's .animate(), meaning GSAP's jQuery plugin would replace them as well, but I don't know for sure. Anyone?
  10. I want to animate the home page of my website like this one : http://discoveroutpost.com/ I am using GSAP TweenMax function but unable to get the smooth animation like this. I am also trying the ScrollMagic Library for it but still no luck. Please guide how can I achieve this. Thanks in advance.
  11. Hi everyone! I would like to create a quotes rotator with SplitText and Timeline Stagger which can be animated in lines or words or chars! I have already tried to create one and there is the Pen that I made below here but it is not really what I wanted to achieve!! I would very appreciate any kind of help. Thank you!
  12. Hi! I'm trying to figure out how to change the color of these waves to gradients rather than solids. Is there a simple way to achieve this? Thanks! Nick
  13. Hi ! I'm starting with TweenMax and got stucked with an issue. I have a menu which each links can start an animation but they can overlap and make the tween bug. I'd like each function to complete before being able to start another one. I've found that I should use onComplete but I don't get what I am suppose to do then. I've made a JSFiddle to demonstrate the issue I have. On .mouseover, the tween start but if I hover too fast on an other link, it bugs. :/
  14. We are an emerging company in the healthcare space looking for a developer with experience in landing page development that is expected to last 1-2 weeks. Must be experienced with Javascript/Jquery, Greensock (other animation libraries), responsive design, and css3 transitions. We are open to location, but would prefer someone in the United States. We have specifications available for applicants to review upon request. If you have any questions or are interested in the role please reply below or at jermaine@care-advisors.com. Cheers, J
  15. Hi guys, I'm trying to recreate a very crude version of the functionality on this site - https://emmitfenn.com/ . As you can see my codepen is working as intended at the moment, but my problem is when I try add another element into the main div (the class for these is UIMenuSlice), the calculations that I have applied don't seem to be adding up correctly. I was hoping some of the wizards in here would be able to shed a light as to how I slightly rejig the calculations I have to allow me to adapt this into a flexible build. There are only 4 elements at the moment but i'd like to be able to change this as possible. Thanks all.
  16. Hey guyz actually i want to apply the jquery events method like mouseover,mousedown,hover method ,etc . I tried to use it but scale function is working but ease:Elastic.easeOut is not working. I know this is very small problem for tweenguyz but please help mi in it.Sorry for my bad english. here is my codewhere i have use scale function but when i have use ease function its not working.PLease help mi
  17. Hi, I'm a novice when it come to this stuff but I've recently set up a holding page for a friend of mine and she wanted a video on it. However I found out that a video is no good in iOS devices as it starts off paused, and you have to click to play it. Therefore I started browsing the net to find a solution, which seemed to be to turn the video into an image sequence. Thats when I found this example codepen http://codepen.io/jamiejefferson/pen/aJcGl So I used the Javascript and bits of the CSS to create my code http://codepen.io/anon/pen/pgrQZO . However as you can see it is very glitchy? I've been trying to iron out the flickering but with no luck. Any ideas how to smooth it all out, as I'm really stuck!? Many Thanks in advance for any help! http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/
  18. Hello, I have a expanding searchbar by using TimelineMax. If you click on the icon, the categories should scale away and the searchbar should expand to 100% width. When click anywhere on the body element while the searchbar is opened, the timeline should play in reverse state. This already works as intended. My Problem is that the timeline reverse is being applied with every click on the body element, even if the searchbar is not expanded plus the timeline is being interrupted and being resetted when clicking on the body element while the timeline is being played. I tried to solve this issues to give the search container a .data value open true or false, but somehow it will not work as intended. This may not be an explicit greensock probleme but rather a javascript logic problem, but I'd be very grateful if anyone may help me out. Timeline Code: (function($) { var $irpsearch = $('#irp-newssearch-container'), $irpsearchinput = $('#irp-searchform-input'), $search_icon = $('.irp-news-search-icon'), $btn_container = $('.irp-filter-buttons'), $filter_btn = $('.filter-btn'), $search_seperator = $('.irp-search-seperator'), $body = $('body'); var openSearchAnimation = new TimelineMax({ paused: true }) openSearchAnimation .staggerTo($filter_btn, .5, {scale: 0.7 ,opacity: 0,ease: Back.easeInOut},-0.1) .set($btn_container,{'display': 'none'}) .to($search_seperator, .3, {opacity: 0, ease: Expo.easeOut}, '-=0.6') .to($search_icon, .5, {backgroundColor:"#ffffff", ease: Power0.easeNone}, '-=1.0') .to($irpsearch, 1.0, {width: '100%', ease: Power3.easeOut}, '-=0.1'); openSearch = function () { $irpsearch.data('open', true); openSearchAnimation.play(); $irpsearchinput.focus(); return false; }, closeSearch = function() { $irpsearch.data('open', false); openSearchAnimation.reverse(0); } $irpsearch.on('click', function(e) { e.stopPropagation(); if (!$irpsearch.data('open')) { openSearch(); /* Body Click */ $body.off('click').on('click', function(e) { closeSearch(); }); /* Escape Hide */ $( document ).on( 'keydown', function ( e ) { if ( e.keyCode === 27 ) closeSearch(); } }); } else { if ($irpsearchinput.val() === '') { closeSearch(); return false; } } }); })(jQuery) Codepen: codepen.io/anon/pen/YQqQWm All the best Pascal
  19. I'm quite new to the jQuery and GSAP and really need Your help . I'm having a problem in animating children div while parent element is hover using TweenMax/TimelineMax. I can animate css of children with jQuery like this: $('.div1').mouseenter(function () { $('.div2').css('font-size', '20px'); }); but since I want to build a really complex animation I would like to use TimelineMax to my code in place of "css('font-size', '20px');" but nothing seems to work. I've build a simple test.html to find a solution: <body> <div id="logo"> <p id="text">TEXT TO BE ANIMATED</p> </div> </body> and I've tried to animate my #text element with this code (obtaining only parent animation): $(document).ready(function () { var hoverEffect = $("#logo"); hoverEffect.hover(function() { TweenMax.to(this, .35, {borderLeft: "15px solid #00b89d"}) }, function() { TweenMax.to(this, .5, {borderLeft: "0px solid #00b89d"}) }); }); I've also tried jQuery .find() and .children() methods but failed... Thanks in advance for Your help
  20. I'm using Draggable to create scrollable element with several divs inside it. For example <div id="draggable"> <div>example</div> <div>example</div> <div>example</div> </div> I want to apply some mousedown jquery code to the divs. for example: $("#draggable div").on("mousedown", function() { //do something... }); The Draggable seems to overwrite and/or steal jQuery's mousedown event. If I disable the Draggable then there is no issue. If I apply some click jquery there is no issue either. for example: $("#draggable div").on("click", function() { //do something... }); I do need to use the mousedown event in this scenario. Has anyone encountered something similar, or does anyone have a solution?
  21. This is my first GSAP animation. I'm very new to this and Jquery. I'm trying to create an animation that will play once the user scrolls to it on the website. I created a scroll script that works great when i'm simply changing a background-color when the users scroll to the element, but i can't figure out how to attach it to my SVG animation. I thought it would be as simple as nesting my GSAP code within my Jqeury but it's not working. My goal is to have the SVG play once the user scrolls to it, and then stop playing if the user scroll away from the icon. I also notice the SVG is floating outside of the Div. Any advice would be appreciated.
  22. Hi, getting an error Uncaught ReferenceError: Timelinelite is not defined. Timelinelite is being grouped together in one concatenated file, it is an old project that isn't using modules or bundling using require and it seems like it is not being added to or accessible on the window for some reason. I was wondering if it was a jQuery comparability issue? or something to do with the recent update to accommodate es6 imports? What is the minimum jQuery version required? many thanks,
  23. Hello, I was wondering if anyone had any idea how this website https://www.box.com/ did their first animation? ie, as you scroll down, the box opens up and shows images -> how do they do the box that opens up? Any help greatly appreciated
  24. Hi, Does anyone know why I get an unrecoverable syntax error in JSHint? Below is a script that I have tweaked. The original version was animated. $(document).ready(function(){ $.ajax({ url: "http://s1.adform.net/Banners/Elements/Templates/14036/8970.xml", type: "GET", dataType: "xml", success: function (xml) { $(xml).find("Group[name=9]").each(function () { var belopp = $(this).find("TextVar[name=summa]").attr("value"); belopp = belopp.substring(0, belopp.length-3); $(".jackpot").html('<h3>Just nu '+belopp+'</h3>'); }); } }); }); _________________________________________ The original version $(document).ready(function(){ $.ajax({ url: "http://s1.adform.net/Banners/Elements/Templates/14036/8970.xml", type: "GET", dataType: "xml", success: function (xml) { $(xml).find("Group[name=9]").each(function () { var belopp = $(this).find("TextVar[name=summa]").attr("value"); belopp = belopp.substring(0, belopp.length-3); $(".jackpot").html('<h3>Drömvinsten är just nu <br /> '+belopp+'</h3>'); var txt = $(".txt"); var txtIndex = -1; var playAnimation = 0; function playAgain() { if (playAnimation <= 4) { showNextTxt(); } else { ++txtIndex; $(".endframe").show(); $(".jackpot").hide(); } } function showNextTxt() { ++txtIndex; ++playAnimation; txt.eq(txtIndex % txt.length).fadeIn(200).delay(3000).fadeOut(300, playAgain); } showNextTxt(); }); } }); }); Best, A
  25. Hi there, I'm using TimelineMax and getting some great results. I'm getting quite proficient with using the Timeline to animate various elements on the page. I've found a script called Typed.js that I've been able to run independently of the Timeline perfectly but I'm unsure of how to get it to play within the timeline? I know there are some callback features but my Javascript isn't great! http://www.mattboldt.com/demos/typed-js/
×