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});
TweenMax.to(window, 0.8, {scrollTo:{y:"header"}, delay:0.3});
}else if (clicked == "arrow") {
TweenMax.to(window, 3.5, {scrollTo:{y:"#aboutMeFull"}});
}else if (clicked == "navAbout") {
TweenMax.to($('#mainNav'), 0.4, {x:windowWidth});
TweenMax.to(window, 0.8, {scrollTo:{y:"#aboutMeFull"}, delay:0.3});
}else if (clicked == "navServices") {
TweenMax.to($('#mainNav'), 0.4, {x:windowWidth});
TweenMax.to(window, 0.8, {scrollTo:{y:"#servicesConBg"}, delay:0.4});
}else if (clicked == "navPortfolio") {
TweenMax.to($('#mainNav'), 0.4, {x:windowWidth});
TweenMax.to(window, 0.8, {scrollTo:{y:"#portfolio"}, delay:0.3});
}else if (clicked == "portfolioBut") {
TweenMax.to(window, 0.8, {scrollTo:{y:"#portfolio"}});
}else if (clicked == "navContact") {
TweenMax.to($('#mainNav'), 0.4, {x:windowWidth});
TweenMax.to(window, 0.8, {scrollTo:{y:"#contact"}, delay:0.3});
}
}
for (var i=0; i<navBut.length; i++) {
navBut[i].addEventListener('click', pageScroll, false);
}
for (var i=0; i<navItem.length; i++) {
navItem[i].addEventListener('click', pageScroll, false);
}
document.querySelector('#arrow').addEventListener('click', pageScroll, false);
//Landing Page
$(function() {
var xTo = 1.15*window.innerWidth;
var yTo = 0.5*window.innerHeight;
var rocketTween = new TimelineMax().add([
TweenMax.from("#parallaxContainer #bg", 1, {backgroundPosition:"0 100%", ease: Linear.easeNone}),
TweenMax.from("#parallaxContainer #starsSmall", 1, {backgroundPosition:"0 12%", ease: Linear.easeNone}),
TweenMax.from("#parallaxContainer #starsLarge", 1, {backgroundPosition:"0 6%", ease: Linear.easeNone}),
TweenMax.to("#parallaxContainer #rocket", 1, {y:0, ease: Linear.easeNone}),
TweenMax.to("#parallaxContainer #cloudsFront", 1, {y:0, ease: Linear.easeNone}),
TweenMax.to("#parallaxContainer #cloudsBack", 1, {y:0, ease: Linear.easeNone}),
TweenMax.to("#parallaxContainer #comet", 0.5, {x:-xTo, y:yTo, delay:0.5, ease: Linear.easeNone}),
TweenMax.to("#parallaxContainer #logo", 0.8, {opacity:0, ease: Linear.easeNone}),
TweenMax.to("#parallaxContainer #arrow", 0.07, {opacity:0})
]);