Search the Community
Showing results for tags 'jquery'.
-
Hi First of all, I'm a total JS noob so apologies if this is a really simple question. I'm trying to animate burning embers, based on this confetti codepen: http://codepen.io/MAW/pen/wBGvgW But it's reliant on jQuery - I need a jQuery-less solution, using only TweenMax, is this possible? Trying to change the code myself (http://codepen.io/htwinam/pen/EPOryg) just throws up endless errors and doesn't work so would be massively grateful for any help Thanks
-
I'm trying to recreate the function Scroll (Drag & FLick) from GreenSock (https://greensock.com/draggable ) on my website to make an image navigation throught a small city. It works great grabbing the image but my problem now is make the arrow navigation work as well as if I'm grabbing the image around. I'm a pretty newbie at the .js and read the documentation but couldn't make this work at all. Someone could take a look and maybe give me some lights on it? Thanks a lot
-
Hi there I'm working through some of the concepts of GreenSock and was hoping someone could point out to me the issue with this animation. As you can see in the codepen the slider measuring the duration of the entire timeline is only about 80% through when it appears all my animations are finished. As a result, when I got to reverse the animation, there is a considerable delay before an animation kicks in. Thanks DB
-
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/
-
Hi, I'm fairly new to GSAP, but I'm really enjoying experimenting with it. A hurdle I have come up against is how to hover over a specific div, and have an animation play based on which div is hovered over. I do not want to have to write the animation for each div. I know the way to do this is to use the jQuery selector 'this', but I can't get it to work for a timeline. I can get it to work using TweenMax.to('') etc, but I want to be able to use play() and reverse(), and so need it to work with a timeline. Rather than me babbling on, it's probably best to just check the codepen. Thanks for reading, and I hope you can help!
-
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.
-
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
-
Please, could You explain me why the rotationX params doesn't fit like rotationY & rotationZ in my 3D cube test?
-
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. -
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
-
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.
-
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
-
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
-
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?
-
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
-
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. -
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!
-
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?
-
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?
-
I don't know if this is an adequate post, but I wanted to know the input from GSAP pros regarding SmoothState.js http://miguel-perez.com/ (Click on the blog posts since they are the only internal pages. It seems like there is not a good demo about it) It creates incredibly smooth transitions from one page to the other. Could the same be accomplished using GSAP?
-
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.
-
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.
-
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
-
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?
-
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
