Get acces to tweens in timeline and change it on media query matches

[_Greg _ 127 Likes (Specialist)]

Hi!

I try to change animation with (window.matchMedia()).matches

How can i get tween from timeline and replace (or edit) it?

 

I read about .remove() method, but how can i add on removed place other tween and how can i add label to tween. for example:

tl
	.addLabel('start')
	.to('.box-1', {x:100}, "start") // <--- how to change this or how to .remove() this and place other tween on this place
	.to('.box-2', {x:100}, "start")

 

See the Pen OJNwPqZ?editors=1010 by Nekiy2 (@Nekiy2) on CodePen

[_Greg _ 127 Likes (Specialist)]

Or better clear timeline and create new one? like Jack write?

I try to create with tl.totalTime(0).clear() but its to massive (check codepen) 

See the Pen MWyBwGy?editors=0010 by Nekiy2 (@Nekiy2) on CodePen

 

 

 

[akapowl 5,225 Likes (Superhero)]

Hey @Nekiy2

 

If you want to play different timelines that are tweening on the same element, for different window-sizes, and you want to make sure, that they respond to resizes, then yes, clearing or even killing the old timelines on resize and creating new timelines is the way to go.

 

Your approach looks like its working well.

 

And if @GreenSock already gave you advice on that, it's safe to say, that you can trust that advice.

 

 

Based on that other thread, your setup could also look like this instead

 

See the Pen 7b5e81f34cf834b2351c70d8e5b36b9c by akapowl (@akapowl) on CodePen

 

[_Greg _ 127 Likes (Specialist)]

Thank you!

Question is timeline have method.remove([tween,timeline,subtimeline,...]) and .add(child, position) if i find how to remove tween from timeline and add to correct position other one i dont need clear() all timeline just replace and i take less code and more functionality

 

[_Greg _ 127 Likes (Specialist)]

Something like 

See the Pen bGpjVXR by Nekiy2 (@Nekiy2) on CodePen

 but its not working (i cant apply duration) and i see some lags and more massive then post with clear() 

 

[ddi-web-team 19 Likes (Newbie)]

Quote

If you want to play different timelines that are tweening on the same element, for different window-sizes, and you want to make sure, that they respond to resizes, then yes, clearing or even killing the old timelines on resize and creating new timelines is the way to go.

- @akapowl

 

Is there a preference here if we're ultra concerned about performance? I would assume that clearing a timeline and then adding in new tweens is more efficient than killing it completely.

[ZachSaucier 7,152 Likes (Superhero)]

I can't imagine a situation where it would be a performance issue to kill off the old timeline and create a new one. That's what we recommend because it's the simplest. 

[akapowl 5,225 Likes (Superhero)]

 

If you only need to adjust a tween or timeline dependent on a certain breakpoint / viewport, you might want to consider checking for those breakpoints, instead of exchanging tweens/timelines on every resize-event.

 

Maybe something like this

 

See the Pen 23958bb162d5131575efc5522c8beca3 by akapowl (@akapowl) on CodePen

 

[_Greg _ 127 Likes (Specialist)]

Thank you!
@akapowl, nice example, thank you

@ZachSaucier, thank you! does it exist aditioanal example for .add() .remove() methods on codepen?

[ZachSaucier 7,152 Likes (Superhero)]

8 minutes ago, Nekiy2 said:

does it exist aditioanal example for .add() .remove() methods on codepen?

Sorry I don't understand the question. Can you try to rephrase?

[_Greg _ 127 Likes (Specialist)]

I talk about example (if you have) where you use this methods something like:

let tl = gsap.timeline()

tl.add(tl2).add(tl3)

// after some code
tl.remove(tl2)

// or something 
tl.remove(tl2).add(tl4)

Does it usefull?

I find answer on my main question:

1 hour ago, ZachSaucier said:

kill off the old timeline and create a new one

but interesting examples about nested timelines and add and remove tweens in one timeline

[ZachSaucier 7,152 Likes (Superhero)]

1 minute ago, Nekiy2 said:

Does it usefull?

It doesn't to me but perhaps I'm missing something.

 

Are you talking about adding and removing things from the timeline dynamically? Like after it has played? If so, why? 

 

I think if you added a minimal demo of the situation that you're imagining it'd help us keep this discussion focused and more concrete.

[_Greg _ 127 Likes (Specialist)]

14 minutes ago, ZachSaucier said:

Are you talking about adding and removing things from the timeline dynamically?

Yes. But not sure that i need it 😆 if i can clear and recreate timeline when i need it 

 

I want more learn gsap. I see on forum that someone use like:
 

let tl = gsap.timeline()
function addtl(){
 	return gsap.to('element', {x:100}) 
}

tl.add(addtl())

and want to find more examples like this, and does someone use.remove() with this type of create timelines. Its mostly for learn gsap

[ZachSaucier 7,152 Likes (Superhero)]

As I said before, there's not many reasons why you'd need .remove(). I've never needed to use it.