[Delay page scroll until GSAP animation complete]

1 hour ago, OSUblake said:

I saw you made a comment earlier. Did you get it working? You can change positioning back to normal once it's scrolled out of view.

I had played with fixed positioning and hiding it once you had scrolled far enough but it was messy. Sticky positioning was exactly what I was looking for so thank you!

[Delay page scroll until GSAP animation complete]

I'm creating a landing page and using GSAP to animate some text according the the user's scroll position.

 

How can I keep the landing page in full view and only start scrolling down the page once the text animation has reached its end?

See the Pen bQxKxK by TheJordanM (@TheJordanM) on CodePen

[How can I write more concise and efficient Tweens?]

46 minutes ago, PointC said:

That little jump seems to come from the scroller container being set to 100vh, but the body currently has the default margins. If you set body margins and padding to 0, I think you'll see a smoother start.

Sorry I should have mentioned I'm using Foundation to make my site responsive and they've got a reset built in that sets the padding and margin of the body to 0.

 

52 minutes ago, Shaun Gorneau said:

For what it's worth ... ScrollMagic is a bit unnecessary here

I'll play around with this thanks! ScrollMagic is making things more complicated than they need to be I guess.

[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});
		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})
]);

 

See the Pen jzLKqB by JordanWM (@JordanWM) on CodePen