chrisi51 Posted November 22, 2020 Share Posted November 22, 2020 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 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 23, 2020 Share Posted November 23, 2020 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 2 1 Link to comment Share on other sites More sharing options...
chrisi51 Posted November 23, 2020 Author Share Posted November 23, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted November 23, 2020 Share Posted November 23, 2020 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 comment Share on other sites More sharing options...
chrisi51 Posted November 26, 2020 Author Share Posted November 26, 2020 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 Link to comment Share on other sites More sharing options...
GreenSock Posted November 27, 2020 Share Posted November 27, 2020 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! 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now