Jump to content
Search Community

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

_Greg _ test
Moderator Tag

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

Link to comment
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 7b5e81f34cf834b2351c70d8e5b36b9c by akapowl (@akapowl) on CodePen

 

  • Like 4
Link to comment
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

 

Link to comment
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.

Link to comment
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

Link to comment
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.

Link to comment
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

Link to comment
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.
×
×
  • Create New...