Search the Community

Hi I am totally new to GASP which when I stumbled upon it today just blew my mind. One thing I have probably yet to see (which probably exists) is how one would add controlls to skip forward or back between sliders(or animation set). Please point me to any resources that shows you how to implement such features. Thanks in advanced.

Hello All, In my attached file, I have tried to modify a simple slider as per my requirement. But, when I slide the slider, the target image gets displayed only after slide animation is finished. Can someone help? Also on mobile, it is sliding very slowly. Please help. I have attached my file for your reference. index.html

Hi all, I have to build a responsive full width (not height) tabbed slider with GSAP. Anyone has tried this kind of project? Any ideas will be appreciated. Thanks! neuhaus3000

Hi, I have been searching for a good example of creating a simple accordion menu, but everything I have come across seems over engineered. 1_I really like the simplicity of this menu: http://codepen.io/ewe1991/pen/agfqA but can't figure out how I could convert the jQuery code to AS3? Does anyone have any ideas? 2_ Could this be accomplished using the blitMask plugin? For example: Set up: 3 mcs that each contain a tab panel portion and a content portion. Have the blitMask to be 1/3 th size of each mc and then when the user hovers over, have the height of the blitMask itself animate top down to reveal the content. --> So based on which mcs is targeted, I would set up a function that would animate the height of the mask and position of the mcs. For example, if user rolls over mc1, blitMask1 would expand down and whatever previously hovered over mc was open would collapse - the blitMask of that mc contracting in height, while the other one is expanding. I have been losing hair over this... Thanks guys!

I'm developing a slider with parallax effect, using TimelineMax. And it's joy ride with GSAP ! But, my intention was to deploy using node-webkit, and I'm getting quite inconsistent performance results. In the codepen I show just the basics, next and previous buttons and you should be able to swipe left and right. (Have to add much more, later, more content on each slide, probably dragging (with Draggable) and make it an infinite slider thing...) As for now, sometimes it just works beautifully, others, it's just a bit jerky, mostly at animations end, when slowing down. I've tried different easings, tried to thin the KBs of images, force3D: true, etc... Only thing is I get a better result, but still not allways smooth, if just open the page in chrome, instead of using node-webkit. I'm about to go back to Flash CC, AIR and Actionscript, (the animation code would virtually be the same) but I'd really like to do this in javascript and HTML5. wondering wether I'm getting hardware acceleration I tried chrome://gpu inside node-webkit, I get the same as just in chrome: Graphics Feature Status Canvas: Hardware accelerated Flash: Hardware accelerated Flash Stage3D: Hardware accelerated Flash Stage3D Baseline profile: Hardware accelerated Compositing: Hardware accelerated Rasterization: Software only, hardware acceleration unavailable Threaded Rasterization: Disabled Video Decode: Software only, hardware acceleration unavailable Video Encode: Hardware accelerated WebGL: Hardware accelerated Driver Bug Workaroundsclear_uniforms_before_first_program_use exit_on_context_lost texsubimage2d_faster_than_teximage2d Problems Detected Accelerated video decode interferes with GPU sandbox on certain AMD drivers: 298968 Disabled Features: accelerated_video_decode Additional GPU rasterization whitelist for field trial: 380694 Disabled Features: gpu_rasterization_field_trial Whitelist for using GPU rasterization for a broader set of content: 399306 Disabled Features: gpu_rasterization_expanded_heuristics GPU rasterization is blacklisted on non-Android: 362779 Disabled Features: gpu_rasterization Some drivers are unable to reset the D3D device in the GPU process sandbox Applied Workarounds: exit_on_context_lost TexSubImage2D() is faster for full uploads on ANGLE Applied Workarounds: texsubimage2d_faster_than_teximage2d Clear uniforms before first program use on all platforms: 124764, 349137 Applied Workarounds: clear_uniforms_before_first_program_use Threaded rasterization has not been enabled or is not supported by the current system. Disabled Features: threaded_rasterization It's a 16 GB RAM machine with a GTX 770 card, but the inconsistency has appeared almost identical on other machines with less resources, so I'm guessing it might not be a hardware issue ? Any ideas ?

New to gsap and js, trying to implement delayedCall in my slider like in the Bassta tutorial (http://bassta.bg/2013/05/simple-fade-infade-out-slideshow-with-tweenlite/). I am running into difficulty trying to killTweento when clicking on 'prev' or 'next'. clearTimout seems to work from the original code (http://tympanus.net/codrops/2013/04/17/background-slideshow/); however, I would like to utilize gsap for this, so I can use sizzle or some other selector engine, instead of full-blown jquery. (My attempt at killTweenTo is commented out in the code) http://jsfiddle.net/gregorygarden/q68723x4/

I have created an image slider for mobile devices using draggable and throwprops plugins. i want to limit the dragging limit upto just one image per drag. I don't want to make it too much free flow resulting in sliding through many images.

Let's say I have a image slider that I want it to scroll when I click on a button. But I do not want it to be the same order every time I click on the image. If the image width is about 100px, can blitMask just cut out 100px from it and random rearrange it when it scrolls? And if the image have an event I want to trigger, I need to remove the 'disableBitmapMode' when the animation stop. But when I disable it, the 'copied' image will be removed making the slider be out of the screen, or in a different position when it stopped. Or a better way to do it would be using enter Frame?

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?

I need to create two elements and I am not sure where to start. First I need to create a slider that can control a TimelineLite animation. Second I need to create a custom scroller for a div box with its content being text. Any help on these two items will be greatly appreciated. Thanks for your help!