Search the Community

Hi Guys, I'm trying to achieve something but I'm a bit stuck. So I'm trying to integrate the Jquery UI selectable with the Draggable. Basically I want to be able to tell an element is clickable (I know I can set the draggable=true attribute) and draggable at the same time. Is this possible? Do I need to create additional layers on the element? The goal is to visually only appear to be 1 element (for instance an image, a thumbnail, etc.) I hope it wasn't too confusing Thanks, Hugo Noro

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?