Search the Community
Showing results for tags 'Animation'.
Found 509 results
-
Hi all, I have a timeline controlling several tweens. I can pause and resume it with no problem. However when I call the addPause(X) method, X being a number, I can't resume or play the timeline anymore after that. Thanks for your help
-
Might be a Flash question, but still, since all the animations are done with TweenLite (fabulous library, btw), I'm asking here. When I publish my animation (swf and html) and open it in IE, the animation doesn't start. I can see only the first frame, but if I open .swf in Windows Explorer, everything works fine. I have three layers in Flash - one with actionscript and two with symbols. Only one frame exists, since everything is done in AS. Thanx to anyone for answering...
-
Hi, first post. Hope i haven't overlooked something obvious. I have a series of 'cards' (divs w/ front and back) that look similar to this pen: http://codepen.io/GreenSock/pen/yzahJ except the flips all happen on a timeline instead of on hover. what we want is, in the middle of the timeline (which sequentially flips 8 cards), we want to be able to have a user hover, and stop that one card from flipping, and change its opacity. right now, all 8 cards are run together on one single timeline (b/c we need tight control of timing), so i don't know if i need put them onto their own timelines or something. Any pointers or clues would be much appreciated on how i could allow the single hovered card to drop out of the timeline and change its opacity, while still allowing the other cards to keep their animation/flipping happening. Thanks! m
-
Hi everybody, First of all, gratz for the amazing work you've done Jack, Carl and all the community's member who help the development of GreenSock. (and sorry for my bad English). i use TweenMax for 4 years in my projects AS3 in Flash and now i try to convert me to HTML5 with GSAP. I want to be able to convert all the work ive done for these 4 years in HTML5 and so ive decided to work with the more complex animation. The matter with this animation is the number of element animated (i join it to the message). I don't intend to declare all the element one by one, in CSS, this will be a wasted time I think. So, ive searched on the web but I found nothing that I can use. I work with Adode Design Premium CS5, so i can't use CreateJS as plugin for Flash and I haven't Edge Animate. I tried Swiffy but It doesn't seems to work. I tried to do something like this in Flash: function createCSS () { for (var i:int=0; i<numChildren-1; i++) { var mc:MovieClip = getChildAt(i) as MovieClip; tabMC[i] = mc; trace ('#'+mc.name+'{'); trace ('position:absolute;'); trace ('x:'+mc.x+';'); trace ('y:'+mc.y+';'); trace ('}'); trace (''); } } wich display a "potential" CSS style-sheets of all the elements but if I want it works, i will have to export each element in SVG with Illustrator with the same name used by Flash, and that also seems to be a wasted time. Is there another solution you see to do this ? I hope Ive been clear, my english is so bad. Thank you in advance for whatever help you can give me. Notice that the animation size is very low (52ko) i want to keep this size as lower as possible, even in HTML5. ps: attached file contains the .fla ATRT_anim01.zip
-
Hi, I am new to particle generation animation, and I was wondering if I could use TweenLite to make the movement more fluid with eases. If I don't need TweenLite or can't use it any alternative would be appreciated. I did a few tutorials and came up with this code for a snowing animation. I think I could ease with a sin function, but I'm not sure of where to put it in my math and I would rather use the default ease in TweenLite package { import com.greensock.TweenLite; import com.greensock.easing.*; import flash.display.MovieClip; import flash.events.Event; import flash.utils.Timer; import flash.events.TimerEvent; public class Snow extends MovieClip { private var flakesVector:Vector.<MovieClip> = new Vector.<MovieClip>(); private var timer:Timer = new Timer(2000); public function Snow(speed:int = 3, flakesNumber = 150):void { for(var i:int = 0; i < flakesNumber; i++) { var flake:Snowflake = new Snowflake(); flake.vel = (Math.random() * speed) + 0.5; flake.xSpeed = Math.floor(Math.random() * (0.5 - -0.5 + 1)) + -0.5; flake.scaleX = (Math.random() * 1) + 0.3; flake.scaleY = flake.scaleX; flake.x = Math.random() * stage.stageWidth; flake.y = Math.random() * stage.stageHeight; addChild(flake); flakesVector.push(flake); } addEventListener(Event.ENTER_FRAME, fall); timer.addEventListener(TimerEvent.TIMER, changeMovement); timer.start(); } private function fall(e:Event):void { for(var i:int = 0; i < flakesVector.length; i++) { flakesVector.x += flakesVector.xSpeed; flakesVector.y += flakesVector.vel; if(flakesVector.y > stage.stageHeight) { flakesVector.x = Math.random() * stage.stageWidth; flakesVector.y = -flakesVector.height; } } } private function changeMovement(e:TimerEvent):void { for(var i:int = 0; i < flakesVector.length; i++) { flakesVector.xSpeed *= -1; } } } }
-
Firstly I would like to say thanks to you Greensock guys for making such a great animation platform. I have struggled with animation over the years using JS and GS is simply the best out there. My question is this: I am currently trying to create a clock with an hour and minute hand (also an AM to PM dial but that can come later after I get over this hurdle). I have got the hands to tween infinitely around and this works great if it were static and you just want a clock to keep spinning and spinning around. What I ultimately want to acheive is to be able to set the time and the clock would spin around till it reached that time. I have created a codepen link to show what I have done so far http://codepen.io/anon/pen/Iakzg I am very new to the platform, I hope I can get some advice about what I need to do. Any help is greatly appreciated and I would love to hear from some of you greensock gurus! Thanks!
-
I not sure this is the right way to do it or not, basically what I want to do is when hover over the div, the paragraph will move down and the title will turn green with class added to it. then when hover out the exact reverse will occur. My problem now is that when I hover over and out multiple times swiftly and land my cursor within the div, the mouseenter animation will not trigger, but when I move my cursor out again and move back in then it will back to normal... What seem to be the problem actually? Here is my code: http://codepen.io/vincentccw/pen/rpIgD
-
From my code the red cube div suppose to animate its height to 0 first before adding the new div class. but right now the problem is that both of them seem to trigger at the same time. I have tried using callback function but still doesnt work. How do you ensure the animation is complete before adding the class? Here is my code: http://codepen.io/vincentccw/pen/yeqzD
-
Alright, another question Greensock Guys... Was having a look at the Served ping-pong site the other day, have a look at it here: http://www.served-mcr.com/ Great site, loving the animation in it. Noticed they're using TweenMax and Scrollorama among other scripts, nice. I was interested in the tiny background animations they've included. I created something very similar a while ago with CSS Animations and Keyframes, and in the spirit of cross-browser compatability I wanted to recreate it with JS. I've been hearing more and more lately about animated PNG's using this method (as opposed to an Animated PNG, or Firefox's APNG). I get how they're using setInterval to call an individual .png file every x second to create the illusion of an animation, which is pretty cool, and a huge time/file-size saver when compared to say using .gif's, but I haven't been brave enough yet to try and create something similar with the GSAP. If any of you guys have the time could I ask for any suggestions or examples of how this might be done with Greensock? I've included some makeshift assets for you to use, just five images of squiggly lines you could use to trigger through, if that makes it easier Appreciate any help you boys have. Cheers
-
How do you clear a timeline every time you perform a mouseover and mouseout function? Here is my code: http://codepen.io/vincentccw/pen/paslB My problem now is that the animation will build up within the variable and causing some weird behaviours when I perform more than one hover....
-
Hey guys, I'm a complete noob when it comes to animating along bezier curves. (I've never needed to use it until today). http://cdpn.io/synLJ I've got 6 circles dropping down and swinging to the right and then the left. I'm happy with what I've got up until that point. However when I want it to sit back in the starting point. I can't quite get it to look okay. Anyone got any tips? Or know of tools that I could use to get the right values? Cheers guys!
-
Hello Greensock community, A small question that had me scratching my head late last night. I have a simple mobile slide-out menu on http://swizzy.gingersoulrecords.com/ (below 767 px browser width, trigger is in the upper left). If you use a desktop browser to narrow your browser and trigger the slide-out animation, it's smooth as butter...but on an actual mobile device (iPhone 4 in my case), it gets a little choppy as it has to 'push' the lorem ipsum down as it expands. Interestingly, if I get rid of the text and leave just the menu there, it has nothing to 'push down' by expanding and slides down perfectly with no choppiness. This may be due to my device being slow, but I'm thinking it's because Greensock has to do double duty - animating the transition of the target and then animating the 'push down' of the non-targeted content area. I tried adding the z(0.1) trick to kick for hardware acceleration, but that didn't seem to do much for me. Anyone want to open http://swizzy.gingersoulrecords.com/ on a mobile device and compare the slidedown animation performance with desktop? I may just design around this (I think a fixed, persistent nav is better for mobile anyways), but I imagine that one of my greensock animations will be 'pushing' content in the future, so I'd like some help understanding this. Thank you! Dave Bloom Ginger Soul Records
-
How do you clear animation cache? When you hover over and our the elements few times you can see the animation continuing even if the function is not being call. In jquery, I use: e.g. $(this).stop().animate({opacity: 0}, 500); but how about in GSAP?
-
http://codepen.io/vincentccw/pen/svBte This is the code I'm using: /////////////////////////////////////////////////////////////////////////////////////// var hoverEffect = new TimelineMax(); $('div').on('mouseenter', function(){ hoverEffect.to($(this), .2, {top:"-=20px",ease:Quad.easeIn}); }).mouseleave(function(){ hoverEffect.to($(this), .2, {top:"+=20px",ease:Quad.easeOut}); }); /////////////////////////////////////////////////////////////////////////////////////// On first hover, the div straight away jump into the end and skip the animation but when hover the second and third time, it goes back to normal.... I also noticed that when I place my variable inside the mouseenter function it fixes the problem but is there anyway that I can place the variable outside the function?
-
Hello everybody! I have a problem with the Superscrollorama plugin. I'm a graphic desiner, so I don't understand too much about Javascript. But I'm trying to learn it. I could make an animation with the plugin, but my problem is that I'm doing a responsive website, where each section has a height that fits on the screen. For this reason, I would need to start the animation when the section is displayed, not when I scrolled up to X number of pixels (3000px in this case). I hope I explained the trouble. I'll paste the code that I would like to change, someone can help me? Pleeeeease controller.pin($('#slide5'), 2800, { anim: (new TimelineLite()) .append( TweenMax.fromTo($('#move-1'), .75, {css:{left: 0, top: 0}, immediateRender:true}, {css:{top: 100}} ), -1.5 // offset for better timing )
-
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. With the release of iOS 7, I was anticipating some big leaps forward in browser performance. What I found was quite surprising. Is anyone else experiencing the same thing? Here's a quick [and very casual] video showing what I discovered: A lot of people in the industry talk about the benefits of using CSS transitions because they're so much faster, especially with transforms (scale/translate/rotate) on mobile devices. What happened? Why is Zepto (which uses CSS transitions) so much slower? GSAP's performance remains solid in iOS 7 (far better than jQuery and other libraries), but CSS transitions fall flat on their face (at least with transforms). Can anyone shed some light on what's happening? Are you seeing the same results in iOS 7? Also, is anyone else seeing worse performance when altering the scrollTop or scrollLeft of DOM elements? Useful links Speed test Draggable Demo CSS Transitions/Animations vs. GSAP Cage Match jQuery vs. GSAP Cage Match Why GSAP? A practical guide for developers UPDATE: Apple reached out to us and acknowledged the apparent bug and said they're working on a fix. (Thanks Apple) -
Here is my full script: <script> $(document).ready(function() { var controller = $.superscrollorama(); //This code snippet is built on the parallax example: controller.addTween( '#gun', (new TimelineLite()) .append([ TweenMax.fromTo($('#hammer'), 1, {css:{rotation: 0}, immediateRender:true}, {css:{rotation: -25}, ease:Quad.easeInOut}), TweenMax.fromTo($('#trigger'), 1, {css:{rotation: 0}, immediateRender:true}, {css:{rotation: 40}, ease:Quad.easeInOut}) ]), 500, // scroll duration of tween 200); // offset? }); </script> What I need to know is... how can I add a tween to this timeline? I just need to know how to add tweens after the one I already have. Everything I have tried does not work.
-
Hey guys, I wanted to find out whether there are any other animation apps for html5 that uses a timeline other than Adobe Edge, that I could check out? Animating using GSAP is great, but sometimes I like to have things on a stage to manipulate and test to see how things should be moving, before jumping in to the code. Or say your business director wants something by the end of the day to show his client, and you quickly want to prototype something. What are your workflows like?
-
Hi all, I am trying to find a way to export the timeline animation to a mp4(compressed) video. Does someone know how this can be done? Will really appreciate your inputs and suggestions. Thanks
-
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?
-
Hello everyone, I have just launched a new website: http://html5maker.com It exports frame-based animations using TweenMax library. Currently only Move and Fade effects are supported but I plan to add more effects in future. Here are some templates that were done using html5maker. Waiting for your feedback and feature requests! Thanks!
- 6 replies
-
- 2
-
-
- html5maker.com
- animation
- (and 3 more)
-
Hi, I am a total noob to jQuery and just learned what GreenSock was today. I would really like to use Superscrollorama for a site I'm building but I don't totally get it. I'm attempting to play with this example but nothing is happening: https://github.com/johnpolacek/superscrollorama/blob/master/simpledemo.html When I save this as an html file and open it up, it's just black words on a white screen. Please help!
-
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'm using this simple code to make my div button fade in and off automatically and it suppose to repeat itself....... var tl = new TimelineMax({repeat:-1}); tl.from($('#slideScrollBtn'), 1, {autoAlpha:0}) .from($('#slideScrollBtn'), 1, {autoAlpha:1,ease:Power1.easeOut}); it works fine in chrome and firefox but when I tested in IE8 the animation works fine in the first 2 rounds then it stuck. Where did I go wrong?
-
Hi, I have an question, how to rotation object with origin? i need my object rotate stick at the left and middle of the object. same as the left 2 images Please Help~ Thanks alot.......
