Jump to content
GreenSock

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

gsap burger menu - give me your feedback please :)

Recommended Posts

Hey, i just built a new burger menu and would like to get some feedback, what do you think about.

 

Sure, there a dozens of em out there but i wanted to build one on my own - also to get more familar with gsap

 

Maybe you see some really bad DON'Ts so please tell me then :)

 

actually i would have to update the vh and vw in the timeline on window resize :(

 

Thank you

See the Pen RwRzYOE by chrisi51 (@chrisi51) on CodePen

  • Like 2
Link to post
Share on other sites

Hey chrisi51. Some notes:

  • Why use jQuery for your scroll animation when you're loading GSAP? GSAP is much more performant and gives you more control. 
  • Your methods are not very efficient. You recalculate the offset and such every time a button is clicked. It'd be better to only recalculate things on load and then after someone is done resizing the browser.
  • You shouldn't be referencing anything in GSAP that's started with a _. There should always be an alternative way to do that sort of thing. 
  • We recommend using the GSAP 3 condensed string form of eases instead of the old object form like you're using (i.e. "sine.in" instead of Sine.easeIn).
  • I recommend making use of GSAP 3's defaults functionality.
  • Your code formatting could be cleaned up a good bit.
  • (optional) You could write this with ES6.
  • (optional) As always you could do this pretty easily without jQuery if you wanted to.

But at the end of the day what you have works. So good work :) 

  • Like 2
  • Thanks 1
Link to post
Share on other sites

thank you for your feedback @ZachSaucier

 

Something like that i was waiting for :)

 

5 minutes ago, ZachSaucier said:
  • Why use jQuery for your scroll animation when you're loading GSAP? GSAP is much more performant and gives you more control. 

yep i really have to learn the full power of gsap to not fall back to jquery without any need of it - actually while reading your feedback i have no clue, what i could address to gsap instead of jquery but i will check that :)

5 minutes ago, ZachSaucier said:
  • Your methods are not very efficient. You recalculate the offset and such every time a button is clicked. It'd be better to only recalculate things on load and then after someone is done resizing the browser.

this is a good point, will also check that - btw. i meantioned to not have an idea, how to react on window resize. Is the only way to overwrite the whole timelime to change vh and vw used in the timeline?

5 minutes ago, ZachSaucier said:
  • You shouldn't be referencing anything in GSAP that's started with a _. There should always be an alternative way to do that sort of thing. 

how to get timeline direction without asking timeline._ts? :(

5 minutes ago, ZachSaucier said:
  • We recommend using the GSAP 3 condensed string form of eases instead of the old object form like you're using (i.e. "sine.in" instead of Sine.easeIn).

ok - i saw both on my readings and string form felt wrong in any way :)

5 minutes ago, ZachSaucier said:
  • I recommend making use of GSAP 3's defaults functionality.

what do you mean? again jquery? or what is this related to?

5 minutes ago, ZachSaucier said:
  • Your code formatting could be cleaned up a good bit.
  • (optional) You could write this with ES6.
  • (optional) As always you could do this pretty easily without jQuery if you wanted to.

is there any special you would to address to ES6? as i have to support IE11 i cant use ES6 - does i?

Link to post
Share on other sites
1 hour ago, chrisi51 said:

i have no clue, what i could address to gsap instead of jquery

GSAP's ScrollToPlugin does that sort of thing.

 

1 hour ago, chrisi51 said:

Is the only way to overwrite the whole timelime to change vh and vw used in the timeline?

No. You can update values in a timeline by using functional values and invalidating the timeline when you need to update the values.

 

1 hour ago, chrisi51 said:

how to get timeline direction without asking timeline._ts?

timeline.reversed()

 

1 hour ago, chrisi51 said:

what do you mean?

 

1 hour ago, chrisi51 said:

is there any special you would to address to ES6? 

You asked for code review, so saying to use modern JavaScript is one of my suggestions :) I'm not going to go through all of ES6 to talk about the changes.

 

1 hour ago, chrisi51 said:

i have to support IE11 i cant use ES6 - does i?

You can compile your JavaScript into ES5 for IE11 support.

Link to post
Share on other sites

 

Hey @ZachSaucier i made some progress on this.

 

On 11/23/2020 at 5:06 PM, ZachSaucier said:

No. You can update values in a timeline by using functional values and invalidating the timeline when you need to update the values.

 

can you give me some code? 

i tried to invalidate the tl in the resize function and also tried to restart it afterwards but nothing resulted in a recalculated  <div id="middle"></div> ... either the width, nor the y position.

 

at least i've added timeline.reversed() and default duration :)

and i ripped jquery but im not sure if this is really the best option on my end as i had to google a lot to get it working with native javascript :P 

Link to post
Share on other sites
6 hours ago, chrisi51 said:

can you give me some code? 

i tried to invalidate the tl in the resize function and also tried to restart it afterwards but nothing resulted in a recalculated  <div id="middle"></div> ... either the width, nor the y position.

Zach is out for a few days, so I'll chime in briefly...

 

Sample pseudo code that shows invalidating a timeline and using function-based values:

let tl = gsap.timeline(),
    someValue = 100;
tl.to("#el", {
  x: () => someValue
});
...
// then later...
someValue = 200;
// revert to the starting values, then invalidate so the new value(s) get populated on the next render
tl.progress(0).invalidate(); 

Happy tweening! 

 

  • Like 2
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.

×