Search the Community

I am using a jQuery Ui slider to control my animation, but when the animation is playing the slider handle is very jumpy, it seems to momentarily pause at the start of each animation. I have tried all kinds of things, from simplifying my timeline, removing delays, removing lables, changing easing, adding the jQuery Easing plugin, but nothing seems to work. So I am wondering if anyone has a solution for this, or can suggest an alternative. I have looked at other slider tools out there such as NoUiSlider, but I don't know how to set them up so that they can control the animation (and update with the animation). Or perhaps a way of doing this solely with Greensock. Here is my code: var tl = new TimelineMax({onUpdate:updateUI}) tl .fromTo("#route1", .8, {autoAlpha:0, ease:Expo.easeIn}, {autoAlpha:1, ease:Power2.easeIn}) .fromTo("#route2", .8, {autoAlpha:0, ease:Expo.easeIn}, {autoAlpha:1, ease:Power2.easeIn}) .fromTo("#route3", .8, {autoAlpha:0, ease:Expo.easeIn}, {autoAlpha:1, ease:Power2.easeIn}) .staggerFrom([oh1, oh2, oh3, oh4, oh5], 1, {opacity:0}) .to({}, 5, {}) .set("#mainRoute", {visibility:"visible"}) .to("#route1a, #route1b", 0.5, {strokeWidth:"16", stroke:"#5dc3f0", ease:Power2.easeInOut}) .to("#route1-text", 0.5, {fill: "#5dc3f0", ease:Power2.easeInOut}, "-=0.9") .to("#route1a, #route1b", 0.5, {strokeWidth:"6", stroke:"#ffffff", ease:Power2.easeInOut}) .fromTo(alt, 0.5, {autoAlpha:1, ease:Expo.easeIn}, {autoAlpha:0, ease:Expo.easeIn}) .fromTo(main, 0.5, {autoAlpha:0, ease:Expo.easeIn}, {autoAlpha:1, ease:Power2.easeIn}, "-=1.0") .to({}, 5, {}) .to(".id1, .id1a, .id2a, .id4, .id4a, .id5a, .id6, .id6a, .id6b", 0.3, {stroke:"#F8991D", strokeWidth:"10", ease:Power4.easeInOut}) .set("#rowLabel1, #rowLabel2, #rowLabel3", {visibility:"visible"}) .to(".label div", 0.7, {css:{backgroundColor: "#F8991D", opacity: 1, fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to({}, 5, {}) .add("row", "-=0.3") .to(".id4, .id4a", 0.3, {stroke:"#895881", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase4", {visibility:"visible"}) .to("#phase4 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#895881", fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to(".id5, .id5a", 0.3, {stroke:"#937963", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase5", {visibility:"visible"}) .to("#phase5 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#937963", fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to(".id6, .id6a, .id6b", 0.3, {stroke:"#B2D235", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase6", {visibility:"visible"}) .to("#phase6 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#B2D235", fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to({}, 5, {}) .to(".id1, .id1a", 0.3, {stroke:"#F8991D", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase1", {visibility:"visible"}) .to("#phase1 div", 0.7, {css:{backgroundColor: "#F8991D", opacity: 1, fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to(".id2, .id2a", 0.3, {stroke:"#81D0D3", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase2", {visibility:"visible"}) .to("#phase2 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#81D0D3", opacity: 1, fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to(".id3, .id3a", 0.3, {stroke:"#D6562B", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase3", {visibility:"visible"}) .to("#phase3 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#D6562B", opacity: 1, fontSize: 22}, ease:Power4.easeOut}, "-=0.3") var cloudsAnimation = new TimelineMax({repeat:50, repeatDelay:.5, yoyo:true}) cloudsAnimation.fromTo(allclouds, 120.2, {x: -900, y: -1200}, {x: 400, y: 1600}); function init() { TweenLite.set($(".label"), {visibility:"hidden"}); } init(); totalProgressSlider = $("#totalProgressSlider") .slider({ range: false, animate: true, min: 0, max: 100, step:.3, slide: function ( event, ui ) { tl.totalProgress( ui.value/100 ); var topValue = -((100-ui.value)*difference/100).animate(); } }); function updateUI() { totalProgressSlider.slider("value", tl.totalProgress() *100); } $("#totalProgressSlider, .ui-slider-handle").mousedown(function() { $('html, #totalProgressSlider, .ui-slider-handle').one("mouseup", function(e){ tl.resume(); }); }); rowBtn.click(function() { tl.tweenTo('row', {ease:Bounce.easeInOut}).timeScale(16); }); topsoilBtn.click(function() { tl.tweenTo('topsoil', {ease:Bounce.easeInOut}).timeScale(16); }); trenchingBtn.click(function() { tl.tweenTo('trenching', {ease:Bounce.easeInOut}).timeScale(16); }); CSSPlugin.defaultTransformPerspective = 600; TweenLite.set([main], {rotationX:0}); TweenLite.set("h2", {autoAlpha:0}); I found this example: http://codepen.io/rhernando/pen/Batoc but how to I get it to update with the timeline progress?

Hi I've set up a class that uses the ThrowPropsPlugin - it accepts a movieclip for scrolling in an AIR iOS project. Currently I'm setting this class up as a new instance in every class I need scrolling in, but it seems wasteful. Is there a standard way to have one such scrolling class, that all your classes send movieclips to for scrolling? Is it a matter of having a var in a global model that all classes send movieclips to, and then that var dispatches the movieclip to the scrolling class? Or is a better way to create the class once, and inject it into the constructor of every class that needs scrolling? Cheers

I am using copyPixels() to copy data from 12 large 3000x3600 bitmapData instances already loaded into memory. The data is being copied into a Bitmap which is the target for my BlitMask. I've tried all sorts of permutations of using bitmapData.dispose() but whatever I do everytime I use copyPixels on one of the instantiated images it adds about another 40Mb to my BlitMask (probably the size of the 8bit 3000x3600pixel image in cache) I try and force the garbage collection using System.pauseForGCIfCollectionImminent(0.01); but I only seem to increase the amount of memory being allocated. It is only when I dispose of the BlitMask that I can free up memory. Any ideas or should I try another approach? I have the feeling that because BlitMask caches the display object as a bitmapData object that it is also drawing in the cache created by the copyPixels() function. I am trying to make a music score scroller so I cannot interrupt the display of the image whilst the music is playing. Many Thanks

Gidday Jack I'm using Flash Pro and AIR to create a native mobile app for iOS and Android, and have JUST realised that scrolling doesn't happen automatically - you have to program that little devil. What of your products would I need to do this? ThrowProps? And what else? Do you have any as3 coding examples that can get me up and running with vertically scrolling lists that contain text and images? Thanks for your time and help.

Hello, I love your products and everything Greensock stands for. Your products are top-notch, and the customer service is as good as the Kinko's customer service is bad. GreenSock customer service is like "Bizzaro Kinko's Customer Service." In other works: GreenSock - "Totes Awesome Sauce" Kinko's - "The Hangover 2 & Indiana Jones 4, kind of awful" I am trying to come up with the most efficient and "zazzy-licious" way to put in the background of one of my website page, the scrolling code that you see on computer screens in the background of movies and tv shows. I'm not sure if I want just pure binary (1's and 0's) or letters and numbers. I figured that I would find about 500 ka-trillion Google results showing different ways of doing this in various languages, but alas, I didn't really find much of anything. I'm using the Greensock Javascript libraries (v.12) and the latest version of Raphael.Js. I don't really need anyone to show me how to do this, by providing a working example (at least, not yet). I'm really looking for a broad outline of the steps I would need to take to accomplish this task in the most code efficient and least taxing burden on the browser way possible. Any help would be greatly appreciated. Thanks, Sweet J

I am creating an application that has a dynamic scrolling shape. The shape is two sine curves sitting one above the other, mirrored on on the x-axis, and filled in between. The amplitude and frequency will change based on variables. I am new to GreenSock and have been going through the tutorials. I understand that I will be making use of the BezierPlugin, but I am not sure what the process is for animating it. Does this involve simply changing the variables and redrawing to give the appearance of scrolling? There will be sprites moving moving with the y-value of the curves. This y-value will also be used to modulate the volume of a sound. In an email, Jake offered this advice: "it may be as simple as using a plain y tween and a Sine.easeInOut while animating the wave along the x axis." I have been playing around with the Plugin Explorer and I am not quite connecting this advice to implementation. Sorry for the noob questions. I am not looking for someone to do this for me, but to perhaps direct me towards the strategies/tutorials through which I can learn. Best, Matt

Hello, i noticed that most people are talking about a vertical scrolling website with animations.( Like SuperScrollorama ). I need a Horizontal scrolling website, where animations take place while you scroll to the right at certain points. I can't figure out how to link the scrollbar position to a value i can use to trigger tweens.

Hello everybody! I have a problem. I'm trying to do a menu with panel-based flick scrolling and Flick-scrolling into the panels, but I need control the flick scrolling in the panels. Can anyone help me? My file is here. You can wath my problem. https://docs.google.com/open?id=0B8X8BwbpllADRHduUGV5bi1Mdnc Thank you for your help and sorry for my English