Reversing a burger animation

[NickWoodward]

So the linked codepen is the effect/outcome I'd like, and the code in my project is almost identical (line 33, and below), yet the animation won't reverse (See video here).

I understand that it's hard to help without a codepen replicating the problem, but I can only replicate working demos 😄

Just hoped someone might spot something obvious!

*******
Code in original project (the animation itself is identical):
 

export default class Header extends View {
  _menu;

  toggleMenu() {
   // Burger animation
   const burgerTl = gsap.timeline({paused:true});
   const lines = Array.from(document.querySelectorAll('.burger .line'));

   burgerTl
   .to(lines[0], { scaleX: 0 })
   .to(lines[2], { scaleX: 0 }, '<.2')
   .to(lines[1], { rotate:135 }, '<.2')
   .set(lines[3], { display:'block', rotate:135}, '<.35')
   .to(lines[3], { rotate:45 }, '<');

   if(this._isOpen()) {  
     burgerTl.reverse(0);
   } else {      
     burgerTl.play(0);
   }
   this._menu.classList.toggle('open');
 }

  _isOpen() {
    return this._menu.classList.contains('open');
  }
  
  initElement() {
    this._currentElement = this._parentElement.querySelector(`.${this._elementName}`);
    this._menu = this._parentElement.querySelector('.menu--mobile');
  }
}

 

See the Pen abjpMwX?editors=1011 by nwoodward (@nwoodward) on CodePen

[elegantseagulls]

You aren't defining your '_menu' in your code... I'd also wonder if this is loosing its context somewhere, but hard to tell without a demo.

[NickWoodward]

1 hour ago, elegantseagulls said:

You aren't defining your '_menu' in your code... I'd also wonder if this is loosing its context somewhere, but hard to tell without a demo.

Hi, thanks for taking a look.

Sorry, I should've specified that the video shows the element being targeted correctly, ie the animation plays correctly forwards, but not backwards. I'll add the _menu, but it's literally just the menu element stored as a property of the class the function belongs to (so no worries about losing context). The ifcondition is also working correctly as far as I can tell.

Yeah I do understand that it's hard to help without a demo, but the demo I tried to create works   Just thought some obvious mistake might be, well, obvious. You can see from the video that the animation opens fine, then bugs out when trying to reverse.

[Rodrigo]

Hi,

 

The issue could be here:

toggleMenu() {
  // Burger animation
  const burgerTl = gsap.timeline({paused:true});
  const lines = Array.from(document.querySelectorAll('.burger .line'));

  burgerTl
    .to(lines[0], { scaleX: 0 })
    .to(lines[2], { scaleX: 0 }, '<.2')
    .to(lines[1], { rotate:135 }, '<.2')
    .set(lines[3], { display:'block', rotate:135}, '<.35')
    .to(lines[3], { rotate:45 }, '<');

  if(this._isOpen()) {  
    burgerTl.reverse(0);
  } else {      
    burgerTl.play(0);
  }
  this._menu.classList.toggle('open');
}

Why not create a single timeline and toggle it's reversed state like you're doing in the codepen example. You could create a property in the class constructor (this.burgerTl) and then reference that in your toggle method.

 

Also maybe you should try toggling the open class using onStart and/or onComplete and see how that works. Also maybe instead of checking for the open class use a boolean property added to the class instance so you can check for this.isOpen for example. Unfortunately your codepen example doesn't use the same code you posted so is not the same scenario hence not the same result. Maybe the issue is inherited from the class being extended. What I would do is not extend an existing class but create a fresh new one and see how it works.

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!

[NickWoodward]

Hi Rodrigo
 

4 minutes ago, Rodrigo said:

Why not create a single timeline and toggle it's reversed state like you're doing in the codepen example. You could create a property in the class constructor (this.burgerTl) and then reference that in your toggle method.

Ugh, I literally thought I'd tried that and it hadn't worked (and I couldn't really see the functional difference). But yup, just tried it again and it *has* fixed the issue, thanks!

Out of interest, why would it make a difference? Is it because the .set function hasn't run in the newly created tl-to-be-reversed, whereas it would've in the global tl? That's the only thing I can think of...

Either way, thanks a lot!

[Rodrigo]

5 minutes ago, NickWoodward said:

Is it because the .set function hasn't run in the newly created tl-to-be-reversed, whereas it would've in the global tl?

Is quite possible, I actually missed that set() instance in your timeline. Yeah basically that runs when the line is actually visible and it's rotation is already 45 degrees, so it takes it back to 135 and then back to 45. The problem also is that you are reversing a timeline that is at 0 seconds:

tl.reverse(0);

You're telling GSAP take the timeline to 0 seconds and reverse it from there. But reverse it to where, the playhead is already at the start of the timeline. See the issue?

 

For toggling is always better to create and keep a single instance for simplicity.

 

Happy Tweening!

[NickWoodward]

14 minutes ago, Rodrigo said:

You're telling GSAP take the timeline to 0 seconds and reverse it from there. But reverse it to where, the playhead is already at the start of the timeline. See the issue?

Ah, I thought it only played in reverse from the current playhead position if no parameter was passed, and from the end if 0 was passed?

 

18 minutes ago, Rodrigo said:

Yeah basically that runs when the line is actually visible and it's rotation is already 45 degrees, so it takes it back to 135 and then back to 45.

Yup, that describes what was happening.

Anyway, thanks for your help