How can I write more concise and efficient Tweens?
I've created an animated landing page for my portfolio using GSAP and ScrollMagic.js, but it's pretty resource intensive and I know my code isn't the most efficient.
How can I modify the code to create a smoother and more robust animation? And how can my JavaScript be condensed and more efficiently written to avoid repetition?
function pageScroll(e) {
var clicked = e.currentTarget.id;
if (clicked == "navWelcome") {
TweenMax.to($('#mainNav'), 0.4, {x:windowWidth});
T
For what it's worth ... ScrollMagic is a bit unnecessary here (unless the CodePen isn't displaying the entirety of the project). This could be handled with a simple paused timeline where the current scroll position progresses the Timeline. Also, using some X positions rather than "left" could help. Lastly, I'm a fan of using background images on divs and moving the divs (using X/Y) rather than moving the backgrounds because of the hardware acceleration.
Here is a quick codepen taking
