Search the Community
Showing results for tags 'animate'.
Found 98 results
-
I' m sorry, but i start using gsap, from a few days, so my question may be a little silly... which is the best way to animate css background-position property? I've tried doing: TweenMax.to('.back', 8, {'background-position':300}); where '.back' is the element with background image. .back { background: rgba(0, 0, 0, 0) url("img/seq2_0000.jpg") no-repeat fixed 0 0 / 200% 100%; } but what i'm tryng to get is a kind of 'seamless loop' in the background for example a sky and clouds horizontal moving. Anyway GSAP is amazing!!! -
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 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
-
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
-
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
-
Hey again Greensock guys , I've got a brainteaser for y'all, hopefully it's an easy one. I did do a search around before asking, but the forum search won't include the word 'border' as a keyword, it's restricted, and Google only answered so much of what I needed to know. Okay, so I'm trying to recreate this pen from CSS to JS (GSAP): http://codepen.io/joelrodelo/pen/uHjvi Assumed it would be simple enough but it's proving trickier than I thought. I've been trying to do it with an image on a page, have a quick sample here for reference (you can thank me for the working image later ) : http://webslinger.com.au/dev/gs_border_animation/index.html Some of my attempts or JS fiddles are still in the scripts.js page, just commented out, but they're there for reference. I've just been starting with the left side of the image to begin with. The problem I run in to is that the border appears from the outside in, and any method I've tried to have the border appear from any other direction - either by 'y:' or 'height:' - has failed, moved the entire image with it, or nothing's happened at all (you can see some of my other attempts in the js file). I figured the most logical thing to do would be to nest it, to create a new Tween variable that adds the className and then animate the variable in a new TweenMax line, but I think I've gone wrong somewhere with that approach (read back through the documentation, can we only nest new Timeline's, not new TweenMax's?). Anyway, maybe someone's already figured out an approach to this and I've missed it, or maybe the solution's just too obvious for me to see, cause' surely it wouldn't come to having to actually draw a border line around the image would it? Appreciate any feedback in advance.
-
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?
-
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
-
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.
-
I'm new to GSAP and really like it so far. I have one challenge that I think could be easily solved by SplitText, but unfortunately my company isn't interested in going the membership route. Is there an alternative to achieving the same thing? I have a parent element with a header and a variable amount of paragraphs. I'd like to animate the header, then each paragraph in turn. That is, once the first paragraph is finished animating, the second paragraph starts animating. When the 2nd paragraph is finished, the 3rd starts animating, and so on. Here is some sample HTML: <article> <h1>My header</h1> <p>First paragraph</p> <p>Second paragraph</p> </article> Does GSAP have an equivalent of jQuery's $.each() function, such that I could call the same animation on an element with a class, like: $( 'article p' ).each( function() { tl.from( $( this ), 1.5, { rotationX : -90, transformOrigin : 'left top', ease : Elastic.easeInOut } ); } ) That's just pseudo code to convey my idea. I realize it won't work Thanks in advance for any 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
-
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!
-
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:
