Search the Community
Showing results for tags 'animate'.
-
I'm trying to get the target to tween/animate to a position relative to the viewport or body (or parent element), rather than relative to the element itself. How can I do this? When I run the following code, it Tweens the element (target) to a position relative to its own starting position. TweenLite.to(target, 0.5, { top: '200px', left: '200px'}) -
Hey guys, So i have this element that I want to animate x=50, then when thats done animate x=100. I cant seem to make it work or figure out how people do it. It seems to work if I animate the target, then animate another target, then animate the original target again. In the codepen im animating the .menu-button
-
Hi All, I have created a timeline which triggers an animation of a few lines of text and a couple of images. I heavily simplified the code to keep it simple in my Codepen example. My problem is that when I click to re-trigger the animation whilst it is already animating, the animation starts behaving in a way that I would not expect it to. Some of the text and/or images fade out or stop loading. I'm two months into Javascript and GSAP so I'm sure it's down to my logic. I just cannot work out how to stop this happening. Help will be very much appreciated. Thanks for your time. Steven
-
Hi guys! Can I animate a sprite in Phaser with GSAP? I want to animate the sprite in the timeline because I want to be able to reverse it with everything else... In Phaser I animate the sprite as follows: var player = this.game.add.sprite(X, Y, 'player'); player.animations.add('walk', [0, 1, 2, 3, 4 ], 15, false); //the animation end in the frame 4 player.animations.play('walk'); And I am using GSAP to tweening objects... var tl = new TimelineLite(); tl.to(this.state1, 3, { x: -1000 }); I want to replace the sprite animation with Phaser to do this with GSAP, and to reverse this in the timeline animation with tl.reverse(); Thanks in advance PD: See please http://www.html5gamedevs.com/topic/8141-tween-atlas-frame-on-ipad/ Regards, Nicholls
-
Hi there, I just downloaded GSAP and I've been checking out codepen examples. I am a novice at JS so just a heads up I may need a small amount of hand-holding at first. Maybe someone can tell me if this is possible (also with GSAP will it work on IE9+?)- I am making a simple hidden object game where there is a list of items and the user clicks on the objects in the list. When the item is clicked, it fadesOut and strikes out the object text on the list. I've got this working with jQuery. HERE is where I am having trouble. I want users to be able to click on the object's name of text in the list and be given a hint. That hint would consist of magic sparkles moving a long a path and circling the object and then fading away. I'll need a different path for each list item. Also, once striked out cicking the object's name for help should be disabled. I am also trying some SVG plugins and haven't been successful for multiple paths on click yet. I am trying to figure out codepen for first time....so I'll try and have what I have so far available soon. Thanks to anyone willing to help a newb out! OK! Here is the codepen link: http://codepen.io/leelou/pen/IfixC
-
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
-
Hi, I am having trouble getting my animation to fire after I create new slides. I am trying to make a train board that updates from xml data every 20 seconds or so. 1. Create new slides 2. Animate new slides in from above the "slotXX" Futre steps: 3. Change div tag removing the "a" while changing z-index and removing hidden old slide 4. Repeat If anyone can set me on the right direction many thanks will ensue. I don't mind if you just point me to a tutorial that's almost identical or if you want to fork my codepen.
-
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 a JQuery object, but afterwards its some new GSAP object that can't itself be animated. I then get an error: Uncaught TypeError: Cannot read property 'defaultView' of undefined I don't want to go through all of my code and change things to fit GSAP - how can I either fix this, or stop GSAP hijacking JQuery's animate plugin?
-
Hi guys, I am animating a div with a transparent background (the ball). When I use rotation the transparent background seems to get a black background in IE8. This only appears when I use css rotation in my animation. Is there someone who have seen this before and knows how to get rid of this problem? Is it possible to use rotation in any other way than css? This is what my animation looks like; tlBall.to(ball, 0.2, {css:{left:"400px",top:"366px",rotation:360}, delay:0, ease:Sine.easeInOut}) This is that the background with the ball looks like; http://cl.ly/image/1U2a0w0T3O17/image004.png Thanks! - Marcus
-
How to animate a sprite images in canvas using GSAP as in this tutorial is shown?
-
Hey all, I'm currently playing with the timeline and setting up a sequence of animations. So far i've used tl.to in my sequencing and all went good. I then wanted to implement .fromTo however that seemed to mess up my timeline. My objective is fairly simple, summarized in the following steps. 1. I do some initial CSS tweening 2. I fade up some text 3. I tween my div to the outer right 4. I change up some text 5. ISSUE: I now want to re-position my div to the outer left and tween it into center again. Ive set up an illustrative codepen example here: http://codepen.io/mrsgs/pen/IeLrF Note: uncomment line 15 to see the issue apply
-
Hey All, I'm pretty new to these tools, only been working with them for about a week and I'm VERY impressed -- Great work! I'm using the tools to assist me in building a mobile app and they are performing delightfully with phonegap on both iOS and Android devices. Kudos. I am wondering if there's an easy (or at least highly performant) way in which to cause a "Draggable" item (in my situation, basically a div/box on the screen) to change it's opacity/alpha based upon how far away it gets from the "bounds" it's located within? Basically, I want the user to be aware that moving the box a certain amount will dismiss it and remove it by fading the box out more and more as it moves away (and I'd want to fade it back in if it returns), but I haven't found a great way to do this yet. Any help/thoughts would be greatly appreciated -- Thank you! -Flinn
-
Hello Everybody, I had a question on what everyone's preference is when animating... Do you prefer seconds or frames when animating? Also in what instances do you suggest animating in frames? I'm trying to get a better grasp of animating with GSAP using frames. In computer animation when animating, for example 24fps. So in GSAP when animating with frames using the useFrames special property. What determines the frames per second (FPS)? Does the browser determine the FPS? Thanks for any help with my questions to better understand using frames with GSAP!
-
This is my pen: http://codepen.io/vincentccw/pen/qrsAg right now all the divs move together and back to its original position, but how do I animate the div 1 after another? Do I have to target every single div 1 by 1 and animate it? Wouldn't the code be massive is so?
-
I have created a sample for it: http://codepen.io/vincentccw/pen/vLIGh If you look into my javascript panel I have 2set of codes, one using jquery and GSAP another is just jquery(comment out). The code will be active once use scroll down using mouse wheel. My question is how do I use scrollTop but completely in GSAP? As I think GSAP is more readable and animate faster and most importantly I can set up more complex animation at the same time.
-
How do I check if the current greensock animation is animating? Like in jQuery I can do it like this : $('.rightB').click(function(){ if (!$(this).is(":animated")) {//check for jquery animate only TweenLite.to(boxSlide, 1, {left:"-=100%"}); } }); The reason I want to do this is because my property is relative value and would cause complication if click continuously. I only want it to be able to click again only when the animation is done. Thanks for the help
-
Hi, Is it possible to animate an existing text weight from regular/normal font weight to bold style? Either in the Actionscript or Javascript version? I have a sentence where I need to "bolden" a keyword and it would be nice to animate it with an effect rather than just switch. Thanks, Attila
-
Hello, I was wondering if someone had any success of animating a set of images (known also as sprite sheets). I was thinking that animating the css property background-position, and maybe adding some autoAlpha would do the trick. I will probably try and implement something of sorts unless someone has already beaten me to it, so there is no need to re-invent the wheel... looking forward for reading some ideas on the matter... EDIT: Something quick and dirty is the following: var t1 = new TimelineMax({delay:0, repeat:-1, repeatDelay:0}); t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':posX}},0.1); t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':(posX-50)}},0.2); t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':(posX-100)}},0.3); } we have a <div id="spriteContainer"></div> and some css: #spriteContainer{ background:url(fishSprite.png); background-repeat:no-repeat; position:absolute; left:50%; top:200px; width:38px; height:26px; overflow:hidden; } I used this sprite sheet:
-
Hi, I'm a newbie so maybe this is dumb question. I like to animate the color of links, something like: new TweenLite(myMenu, 1, {css:{a:linkColor:"#FFF"}}), But I can't find the property for a:link or a:visited. Is there cheatsheet for all CSS properties that GreenSock can animate. thanks, Ivo
-
Hi all, I'm exploring the possibilities of animating with GSAP in javascript after doing it for years in Flash. While discovering the nuances are fun, I'm finding the edges where Flash made it somewhat easier.... at least for now! I'm trying to recreate an animation I did in Flash but in Javascript. Essentially, it's a masked image that it "scratched" off to reveal an image underneath. Think of a lottery ticket with the silver scratch off stuff... I'd like to animate the reveal with a swiping motion. Any help/ideas on how I would best approach this? A quick google search for animating masks in Javascript turns up alot of SVG usage but I'd like to know how to do this with GSAP. thanks in advance for any thoughts!
