Jump to content
Search Community

Dynamic timeline option parameters

Jinx test
Moderator Tag

Recommended Posts

Hello

 

When my website launches im creating a timeline and then saving it in an object so later I can control it's playback. Thing is, when I call that timeline again, I would like to pass a parameter that will change the background color of my animation dinamically.

 

I know that the timeline is just an object, and going to _first.vars.background  I could change the color, but this is cumbersome. Is there a more direct approach so when I try to play or reverse my timeline I could pass parameters directly and change the burger background color?

 

Thanks in advance :) 

See the Pen MWawbQO by zebedal (@zebedal) on CodePen

Link to comment
Share on other sites

Hi @Jinx

 

Welcome to the forum.

 

I don't quite follow the question. What colors are you changing? Do you mean the divs that make up your lines? Or the background of the parent burger div? Tweens record the starting and ending values when you create them so you may want to just recreate the tween to get the desired result. You could also look at invalidate(), but I get the sense that's not quite what you need here.

https://greensock.com/docs/v3/GSAP/Tween/invalidate()

 

If you're talking about the background of the whole burger parent div, I'd just create a separate tween for that and feed in the color you want and then you wouldn't have to touch the actual burger timeline.

 

Just FYI to play/reverse the burger you can do this.

//add to the end of your timeline
tl.reversed(true); 

//change your listener 
document.addEventListener('click', () => {
  controlObj.burgerAnim.reversed(!controlObj.burgerAnim.reversed());
})

Does that help at all? Happy tweening.

  • Like 3
Link to comment
Share on other sites

As PointC said:

4 minutes ago, PointC said:

Tweens record the starting and ending values when you create them

 

I simply changed the background values to  "red"  and now it animates from a black burger to a red X and back again.

Maybe that is closer to what you were thinking...?

Link to comment
Share on other sites

Hi guys, thanks for your help.

 

What I need is to change the background color of the div's that make up the burger dinamically when I call the play or reverse method on my timeline. Is there a way to pass those?

 

Cheers

Link to comment
Share on other sites

So to be clear...

You want to change the color of the area behind the X and burger  -  not the  X and burger themselves?

For that, I added a line that addresses the id of the div called burger but that might need some tweaking - it goes all the way across. Not sure that is what you want either.

Update in pen above.

tl.to("#burger", {background: "yellow", duration: 0.2}, "<");

 

Link to comment
Share on other sites

Hey Greg

 

Sorry if I wasn't clear enough. I need to change the lines color dinamically. When you click the burger the lines will tween from black to red as per your example. But sometimes I need to tween them from black to white for example. So everytime I run that timeline I need to set those lines background dinamically. I think that what I need is the unvalidate method for what I have been reading.

Link to comment
Share on other sites

Hey PointC

 

This change is supposed to happen on button click yes,  but when the user clicks the button I need to check if my header is opened, if it is the tween should be to black, if the header is not opened the tween should be to white. And when the user clicks the button again I need to reverse that timeline

 

Cheers

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...