JordanM

How can I write more concise and efficient Tweens?

Recommended Posts

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

 

Share this post


Link to post
Share on other sites
5 hours ago, JordanM said:

How can I modify the code to create a smoother and more robust animation? 

 

Unfortunately my knowledge of Scroll Majic is limited. i am thinking however that the issue is not the complexity/efficiency of the gsap animation but rather that it seems to take Scroll Majic a moment to successfully take control of it the first time out, as we see an initial jump the first time we scroll past the trigger but after that it appears smooth.

 

Presumably scroll majic's pin/duration method animates the progress position of tweens and timelines and the way you have it set up it isn't ready to execute this instantly and takes a moment to initialize everything the first time it's triggered.

 

Assuming nobody else here jumps in with a solution you might look on scroll majic forums to see if it has been discussed there.

 

 

 

Share this post


Link to post
Share on other sites

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 ScrollMagic out of the equation and using the users scroll position to progress a Timeline.  I didn't spend to much time on making sure the timings match up, but it should give you the idea.

 

 

 

  • Like 6

Share this post


Link to post
Share on other sites

Hi @JordanM :)

 

Welcome to the forum.

 

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.

 

More concise tweens? You don't need to use the add() method. You can write it like this:

rocketTween.from("#parallaxContainer #bg", 1, {backgroundPosition:"0 100%", ease: Linear.easeNone});

 

You're using the same ease for all tweens so you could also set a new default Then you don't have to add it to each tween on the timeline.

TweenLite.defaultEase = Linear.easeNone;

 

I didn't see your click function in your demo, but you wouldn't need all the if/else statements. One easy approach would be adding a data attribute to each of those buttons and feed that into your page scroll function. Here's a basic example I made as an answer to another forum question, but it should give you a starting point.

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites
30 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.

 

Hey @PointC were you actually able to solve it this way. I considered this thinking possibly it was screwing up the scroll majic trigger but getting rid of margins and padding didn't seem to solve the jump I'm seeing when you scroll for the first time if you scroll quickly.

 

It's odd the scroll bar appears to jump instantly to the scroll position as well, instead of smoothly "scrolling" there. At least that's what I'm seeing on my machine in Chrome the first time you scroll this.

 

 

 

Share this post


Link to post
Share on other sites
44 minutes ago, Shaun Gorneau said:

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.

 

Awesome Shaun, now I don't have to figure out how use Scroll Majic pins which seem very unforgiving. 

Share this post


Link to post
Share on other sites

Here is something a little more fleshed out with moving divs rather than backgrounds ...

 

 

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

 

8 minutes ago, JordanM said:

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

 

Gold badge for Shaun, he eliminated the need for an entire framework with one function:

 

$(window).scroll( function(){
  var curScroll = $(window).scrollTop();
  if( curScroll > 0 ){
    rocketTween.progress( curScroll/scrollMax );
  }
})

 

:-o

 

  • Like 1

Share this post


Link to post
Share on other sites
24 minutes ago, Visual-Q said:

 

 

Gold badge for Shaun, he eliminated the need for an entire framework with one function:

 


$(window).scroll( function(){
  var curScroll = $(window).scrollTop();
  if( curScroll > 0 ){
    rocketTween.progress( curScroll/scrollMax );
  }
})

 

:-o

 

 

 

I appreciate the kind words, but this is far from replacing a framework! :-D

 

In this situation it seems to work well (a tween's progress that is essentially tied to the scroll position). ScrollMagic is absolutely wonderful (and IMHO virtually necessary!) when specific tweens need to fire at very specific scroll points. :)

  • Like 1

Share this post


Link to post
Share on other sites
40 minutes ago, Shaun Gorneau said:

I appreciate the kind words, but this is far from replacing a framework! :-D

 

I didn't mean it does what scroll majic does as far as triggering and such, just that what it does in this usage case replaces the need for it which is great, I've been wondering for a while about how to apply gsap to parallax effects without needing Scroll Majic and pins but never got around to figuring out how to implement it. Simple as it may be your function can do a lot especially if you add some input parameters and additional logic to fine tune control.

 

So gold badge it is.:-D

  • Like 3

Share this post


Link to post
Share on other sites

Congratulations! I've made everyone in this thread an honorary member of my "You Might Not Need ScrollMagic" club.

 

This is pretty much all ScrollMagic does. Yes, I've looked at the source code.

 

 

 

And the problem with ScrollMagic pins. 

 

 

 

  • Like 3
  • Haha 3

Share this post


Link to post
Share on other sites
9 hours ago, OSUblake said:

Congratulations! I've made everyone in this thread an honorary member of my "You Might Not Need ScrollMagic" club.

 

Are there T-Shirts?

 

Follow up question: where do we get these gold badges that Shaun has now? My Moderator Badge is still green. Is there a Gold Level and does that lead to a Platinum Level?

  • Haha 3

Share this post


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

Follow up question: where do we get these gold badges that Shaun has now? My Moderator Badge is still green. Is there a Gold Level and does that lead to a Platinum Level?

 

 

Unfortunately, that was the last gold badge I had in stock. They are custom made in a monastery in the Himalayas and transported on the Silk Road to Istanbul where they are put on carrier pigeons that island hop across the Atlantic. It takes several months. 

 

I'm going to try and source a local supplier, I'll let you know when yours comes in.

  • Haha 4

Share this post


Link to post
Share on other sites
On 3/27/2018 at 1:14 AM, OSUblake said:

Congratulations! I've made everyone in this thread an honorary member of my "You Might Not Need ScrollMagic" club.

 

My mind totally read that in the voice of Jeff Foxworthy :lol:

  • Haha 3

Share this post


Link to post
Share on other sites
2 minutes ago, Shaun Gorneau said:

My mind totally read that in the voice of Jeff Foxworthy :lol:

 

Haha! I didn't even think about that. "You Might Not Need ScrollMagic if..."

 

I've been throwing that saying around for like the past year or so, but I got the idea from You Might Not Need jQuery. Later on I found out that there are several sites like that.

https://youmightnotneed.com/

 

  • Like 4

Share this post


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.