nicoperso2

Hi there, I never posted here yet and I am new to gsap (although long time suscriber) I understand basics little, and read a lot about the api but I am getting lost when it comes to play with interactions and dynamic content: - when to create new timelines? versus when to just control a single one? can't get the general principles... - When calling functions(params): how to control tl inside fn? and if putting those functions into objects to be able to remotely control Tls, then how to pass params to functions? etc etc etc... I can declare fn: fn(el) { tl.do something(target, 2, { onComplete: callback(el){...}}); return tl; } then call fn on click: fn(el); but then I have no control on timeline head. I can do var myObj = fn(); and then call on click: myObj.restart(); this way I have control on tl, but then no more possibility to pass parameters..: myObj = fn(el); is not working in short i am lost with core concepts I guess...so my use case: I am trying to build a slider with animations in and out.. The basic slider is as follow (please forgive the idiotic js.... I am a ux designer...): https://codepen.io/nicoperso/pen/oQyKBK On click on arrows or radios I toggle class of slides to get them displayed block or none. (my only way to keep slider height auto and avoid slider fixed height) so overall very very plain.... On slide change, I need to animate slide that goes out, set its display to none, and animate new slide (that is not yet in the dom).... there starts the headache, I miss general principles to follow... So far, I Animate current slide with a tl in a function, and have a callback that toggle slides classes once anim is done sequence is ok: 1 animate current slide 2 hide current slide after anim through callback 3 show new slide. look like this: https://codepen.io/nicoperso/pen/OawJdV but how to handle animations of new slide?? on the principle? plus a million extra questions...: if I need to pause a TL at creation var tl = new TimelineMax({paused:true}); function showSLide(el){ tl.to($('.slide.show .heading'), .5, {x: "+=300px", onComplete: function(){ $('.slides-buttons input').eq(el).prop('checked', true); $('.slide.show').removeClass('show'); $('.slide').eq(el).addClass('show'); }}); return tl; } how do I resume or restart tl when calling the function...? function showSLide(el){ tl.to($('.slide.show .heading'), .5, {x: "+=300px", onComplete: function(){ $('.slides-buttons input').eq(el).prop('checked', true); $('.slide.show').removeClass('show'); $('.slide').eq(el).addClass('show'); this.restart(); //........................ }}); return tl; } btw, this didn't work: var tl = new TimelineMax({paused:true, onComplete: showSLide, onCompleteParams: [el], onCompleteScope: ???syntax??? }); function showSLide(el){ tl.to($('.slide.show .heading'), .5, {x: "+=300px", onComplete: function(){ $('.slides-buttons input').eq(el).prop('checked', true); $('.slide.show').removeClass('show'); $('.slide').eq(el).addClass('show'); }}); return tl; } Then if using a single TL, how to target an element that changed (from one slide to the other), how to reference it again? var tl = new TimelineMax({paused:true}); function showSLide(el){ tl.to($('.slide.show .heading'), .5, {x: "+=300px", onComplete: function(){ $('.slides-buttons input').eq(el).prop('checked', true); $('.slide.show').removeClass('show'); $('.slide').eq(el).addClass('show'); }}) .to($('.slide.show .heading'), .5, {x: "-+=300px"}); // here target has same name but different element from newly display slide return tl; } furthermore, how to ensure that second tween of the tl doesn't start before callback is done? (in a better way than delaying second tween? Ok, I realise this first post is messy... can someone just point me out to simples examples where click events trigger tls in functions and where content changes?