Yashi-2

Hi, this is a noob question. I want to remove multiple classes at once. how do I do it, is this right? if not what is the correct syntax tl.to(elem, 0.3,{className:"-=open,white"});

Awesome @OSUblake is a superb guy... this is what I want.. thanks, @Sahil @OSUblake

hi, @Sahil thanks for your feedback. and yes I know that method. but I want to clear all the timeline elements like $nameSplit.chars, $descSplit.chars so on. without specifying individual onComplete callback and onCompleteParams with clearProps. I want global onComplete to clearProp all the elements. is it possible to do? if you have time, can you show me how to do it simply?

Hi, I want to know how to clear all the animated properties from TimelineMax at once. not individual. like onComplete clearProp all or something like that and all the nested elements also. is there a way to use wildcard selector? ex: var tl = new TimelineMax({id:"sliderOut", autoRemoveChildren:true, onComplete:function(){ // i want to clear all the animated values and properties at once not individual }}); tl .staggerTo($nameSplit.chars, 0.4, {y:'-10', autoAlpha:0, ease:Power4.easeInOut},0.05,"+=0") .staggerTo($descSplit.words, 0.4, {y:'-10', autoAlpha:0, ease:Power4.easeInOut},0.05,"-=0.5") .staggerTo($techSplit.lines, 0.4, {x:'10', autoAlpha:0, ease:Power4.easeInOut},0.05,"-=0.5") .to($slide_img, 1, {yPercent:'10', autoAlpha:0, ease:Power4.easeOut},"-=0.5") .to($slide_left_svg_bg, 1.5, {x:'20%', autoAlpha:0, ease:Back.easeInOut},"-=0.5") .to($slide_right_svg_bg, 1.5, {x:'-20%', autoAlpha:0, ease:Back.easeInOut},"-=1.5") .staggerTo($staticTitleSplit.chars, 0.5, {y:'20', autoAlpha:0, ease:Back.easeOut},0.03,"-=1.5") .staggerTo($numSplit.chars, 0.5, {y:'20', autoAlpha:0, ease:Back.easeOut},0.03,"-=1.5") .to($left_out_bg, 0.5, {x:'100%', ease:Power4.easeOut},"-=0.5") .to($right_out_bg, 0.5, {x:'-100%', ease:Power4.easeOut},"-=0.5");

Thanks, @Carl . now it's all good.. super cool and super useful tool.. awesome. love it. lot of time-saving and fine-tuning has never been easier like this

ok, I'll post a demo. one thing I've noticed. if my timeline is inside a function. I cant access to that timeline from outside. right? I think that's the problem. my timeline is inside a gotoNext function so GSDevTools cant access to that timeline. I guess.

Hi, @mikel thanks for your feedback. I did that. but that also didn't work. I don't know whats happening. I can only see Global Timeline, cant pick my tween id. it's not showing up

Hi, I just plugged GSDevTools to my js file, but GSdevtools not picking up my timeline IDs, and also it default to Global Timeline and continue to play till 90.00sec. why is that? function gotoNext($out, $in) { var tl = new TimelineMax({ id: "sliderOut" }), $slide_left = $out.find(".slider-left"), $slide_svg_path = $out.find(".svg-bg > .svg-bg-left"), $slide_name = $out.find(".slider-project-name"), $slide_desc = $out.find(".slider-description"), $slide_tech = $out.find(".slider-tech > ul li"), $slide_right = $out.find(".slider-right"), $slide_static_name = $out.find(".slider-static-title"), $slide_on = $out.find(".slider-no"), $slide_img = $out.find(".slider-img"); tl .set($in, { autoAlpha: 1, className: "+=active" }) .set($out, { className: "-=active" }); // other tweens } GSDevTools.create({ id:"#sliderOut" });

This is a simple thing i already did this.

@OSUblake Thank you very much. hahaha you guys are awesome.. but I manage it to recreate it.. but it's a little bit different. but I'll go through your code now and try to understand what you did and see if I missed something then I'll extract that part and apply to my code. once again thank you for this details example and codepen demo.

This problem I solved by using another method. thanks all

@Sahil @OSUblake thanks for the update. I was able to use your first example and I extract that rebinding bounds part and manage it to achieve what I want. thank you both for guiding me. and this is related to my other question. now that one also solved. this is my test example. var introDrag = new Draggable(".dl-main-container", { type: "x", bounds: 'body', edgeResistance:0.65, cursor: '-webkit-grab', dragClickables: true, throwProps:true, allowContextMenu : true, trigger: '.mainBody-right', zIndexBoost:false, lockAxis:true, force3D:true, onDragStart: function(e) { TweenLite.set(this.pointerEvent.target,{cursor:"-webkit-grabbing"}); doc.off('mousemove', moveCircle); }, onDrag: function(e){ this.applyBounds({minX: 300, minY: 0, maxX: -300, maxY: 0}); }, onDragEnd: function(){ doc.on('mousemove', moveCircle); TweenLite.set(this.pointerEvent.target,{cursor:"-webkit-grab"}); this.applyBounds('body'); } });

Ok i'll give a try now. let you know.