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. Hey All, Simple question I hope can be answered. At the moment when .card is clicked all the divs with the class .card animate. I only want to animate the .card div that is clicked. I've experimented heaps with $(this) selection and I can't get it to work as intended. Any help is much appreciated. Thanks all.
  2. Hi, I'm developing a HTML app that needs to work exceptionally fast, particularly on mobile. So I've decided to sidestep using Jquery. I've been looking at http://youmightnotneedjquery.com/ as reference, and while I would not use Jquery for animation, I wondered if using bits of it's functionality would slow it down at all? eg: $(myElement).offset(); is very handy Would that undo all the performance-enhancing work on avoiding jquery code, or is using a combination of GreenSock/Jquery a good approach? From Google: Thanks
  3. Please, could You explain me why the rotationX params doesn't fit like rotationY & rotationZ in my 3D cube test?
  4. I need some help with animating certain parts of my svg image when clicked on another part of the svg image. This is what I'm trying to do: When you click on one of the smaller buttons, for example the yellowbutton, the yellowblock will appear (with opacity: 1) and the other coloured blocks will dissapear (with opacity: 0). When you click on the orangebutton, the orangebutton will appear and the other coloured blocks will dissapear etc. etc. I think I'm on the right track but something isn't working.
  5. Hello, I'm trying to implement the morphing plugin on an accordion module to morph the "+" to a "-" when the answer is in an open state when clicked and back again on the second click or if another trigger is clicked. But when any of the trigger elements is clicked all of the svgs morph. I would appreciate any help you could offer. Thanks, Tim
  6. Can someone please help me fix this code that I found, I would like to use it in my assignment: the problem: on zoom in (ctrl+) and zoom out (ctrl-) the carousel goes crazy the code can be found at this address http://codepen.io/anon/pen/KdxJbP Any assistance would be greatly appreciated PS post responses here
  7. Hey all! I'm trying to animate some pagination elements we have on a company site redesign and am running into some scoping issues (I think). I will start by saying my JS-fu is not great so it's highly possible this isn't so much a GSAP problem as it is a jQuery problem. You can see the core HTML / SCSS here - http://codepen.io/geebru/pen/avRbzw/ And the JS I'm attempting here: // Pagination // Get pagination items function pagerAnimate(play) { console.log("pagerAnimate Activated"); var $this = $(this); var pagerIcon = $this.find('.pagination__icon'); var pagerArrow = $this.find('.pagination__icon__arrow'); var pagerFill = $this.find('.pagination__icon__fill'); var pagerInfo = $this.find('.pagination__info'); var pagerTimelineCore = new TimelineLite(); pagerTimelineCore.to(pagerIcon, '.3', {scaleY: '2'}) .to(pagerArrow, '.3', {scaleY: '.5'}, '-=.3') .to(pagerFill, '.3', {x: '0'}); if (play === 'play') { console.log("pagerTimeline Play"); pagerTimelineCore.play(); } else if (play === 'reverse') { console.log("pagerTimeline Reverse"); pagerTimelineCore.reverse(); } } $('.pagination--previous').hover(function () { pagerAnimate('play'); }, function () { pagerAnimate('reverse'); }); $('.pagination--next').hover(function () { pagerAnimate('play'); }, function () { pagerAnimate('reverse'); }); Basically what I'm trying to achieve is to run the Timeline (forward or backwards) based on hover. The tricky part was getting the $(this) declarations per pagination (previous and next) and playing it forward on mouseIn and reversing on mouseOut. The console.log's in there are firing properly, but nothing is animating and I'm getting no errors. Any help would be awesome as GSAP is saving my butt on some of the designer requested animations on our site Thanks! PS - Apologies if this has been asked, but my Google-fu and searching here led me nowhere.
  8. reference: http://codepen.io/Liamii/pen/RWxVYK Hello! i have jQuery loading in but i don't think i need it, its only used on one line. im happy to use the basic JS notation in its place. var sizes = ["small", "medium", "large"]; for (var i = 0; i < 750; i++) { var sizeIndex = randomNumber(0, 2); var size = sizes[sizeIndex]; var star = $('<div class="star ' + size + 'Star"/>').appendTo(sky); can anyone tell me what the replacement code would be? thanks
  9. Fascinating issue we are having which may force us to just get rid of lightbox. I can't really post a link to this issue because of all the code that's involved. It's a simple site though. No matter what I do, no matter what I try...lightbox, fancybox, jquery dialog simply do not work. Is there something I should know?
  10. Hi, This codepen works in IE but not Chrome or Firefox. Basically its the same setup as i have in Lectora. Lectora autogenerates html and css, so i cannot change much in the structure of the html. The javascript however i can change to whatever needed to get this working. Doublechecked with some other projects done, and noticed that indeed IE works while Firefox and Chrome have problems with tweens for x/y, rotation, scale and the alike... Tested on: Windows 10, IE: 11.0.10240 FF: 41.0.1 Chrome: 45.0.2454.101 m Doing some searching in different codepens i find several pens that work alike. But all of them do create/append new text elements that then get transformed. A workaround i might give a try. But in my case i would prefer not to create new text and just animate like in IE on the existing texts. I hope anyone can help out. Kind regards, Math
  11. Hello, I am re-writing some basic code I was working on and adding GSAP. (TweenMax) I used the TweenMax object (function? I'm new at this.) and then attempted to use jquery's .queue to set up a JQuery function on completion. It doesn't work, but I don't know why, and I don't know what my alternatives are. Thank you for your time!
  12. sym.getComposition().getStage().getSymbol('mc1').getSymbol('element'). Above is the button code (btn) I have to reach the symbol 'element', nested in 'mc1' on the stage. For this example I want to tween 'element' with this code: TweenMax.to(element, 3, {alpha:0.5}); in the future I want to apply a timeline to it. (is this possible? Not quite sure) tl.to(element, 1, {width:"50%"}); My problem is that I can't quite point to it, or figure out how to do this... I have managed to work out how to add external images, video, iFrames and apply text to nested symbols via buttons but this one is an issue for me. I hope to be able to control nested symbols within other symbols this way. Anyway I am a newbie and not that great at code so excuse my naivete. and don't laugh.
  13. I have a click event bound to a "open menu" element and a another one bound to a "close menu" element. After page load, both elements execute as expected but the click event isn't fired if you try to open the menu again. It seems like such a simple piece of code. What am I missing here?
  14. Hi all, I'm in the process of making a headline page with typewriter-ey effects and large epilepsy-inducing text replacement. I've managed to use the TextPlugin to great effect for my primary headline (turned off for the purpose of this question in the blockLetters timeline). What i'm struggling to do is combine both the TextPlugin and SplitText to effect as you can see in the timeline that's active (albumLetters). Ideally i'd want the div to be empty on load then I can control the entire thing through GSAP but it doesn't seem to want to change the copy in the fullText div after SplitText has done it's thing. Any ideas?
  15. 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.
  16. 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.
  17. 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.
  18. 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
  19. 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?
  20. 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
  21. 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.
  22. 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
  23. 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.
  24. 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
  25. 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
×