Jump to content
GreenSock

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

Dynamic timeline option parameters

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

I am not much of a guru but what if you made a little variable to toggle?

 

var toggle = 0
document.addEventListener('click', () => {
  
  if (toggle==0) {
  controlObj.burgerAnim.play();
  toggle=1;
  } else {
    controlObj.burgerAnim.reverse();
  toggle=0;
  }
})

See the Pen JjYdbxV by Arelwynn (@Arelwynn) on CodePen

Link to comment
Share on other sites

I may have missed the point of the question - sorry.

I was simply having the 'X' convert back to the hamburger.

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 @Jinx,

 

You could use a function along with the color parameter to create and return a timeline.

 

See the Pen vYNOxGp by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 3
Link to comment
Share on other sites

Hey Mikel

 

First of all thank you very much for your help. Indeed I tried a similar solution, but then my reverse animation doesn't seem to work anymore if I do that

 

Cheers

Link to comment
Share on other sites

I still don't understand — is this color change happening on button click or page load?

 

In any case, you can use the same technique @mikel showed by feeding the color into the function you use to create your timeline. 

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

Then I'd just use a variable for the header open/close value and feed a color into the burger timeline creation function accordingly.

  • Like 2
Link to comment
Share on other sites

Ok guys so I got it working :) Thanks for your guidance

  • Like 1
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.
×