Lost with timelines in functions.... when to create, when to put them in objects etc..

[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?

 

 

 

 

 

 

 

[PointC]

Hi @nicoperso2 

 

Welcome to the forum and thanks for being a member of Club GreenSock.

 

There's certainly a lot to unpack in your post, but it sounds like you have a basic understanding of returning timelines from functions. For a deeper dive into the subject, I'd recommend you visit Professor @Carl's wonderful post on the subject before you continue with your project.

https://css-tricks.com/writing-smarter-animation-code/

 

As far as sliders go, there are a multitude of ways to create them. A search of the forum for either 'slider' or 'carousel' will produce many threads and demos which should help.

 

Hopefully that gets you started. Happy tweening.