Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Nekiy2

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

 

 

 

Share this post


Link to post
Share on other sites

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 WNwKQbr by akapowl (@akapowl) on CodePen

 

  • Like 4

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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() 

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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. 

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

 

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 eYZjpjr by akapowl (@akapowl) on CodePen

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

Thank you!
@akapowl, nice example, thank you

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

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×