Jank and Jitter? Background Tween

[Winslow]

Evening all,

 

I have had this working in several forms however most all have a brief moment of jitter. Once past "the point" the first time, it works smoothly as planned and I can scroll back and forward properly. Warning!!!! scrollmagic in use and I have read the posts of both the haters and the lovers and I understand both positions.  I'm searching for a solution. Using scroll to shrink a full viewport background down to the height of the navbar which is the following element.  So I am tweening the background height down to the height of the navbar. Both should end up at the top of the page pinned with the height reduced background behind the navbar. In addition, a heading, in the center of the background div, also get 's pinned at the top. I've tried different arrangement of div's, triggers, durations, etc.  It starts to reduce the background height and then flashes and the height goes up and down. This simplified codepen can't get past the issue however as stated above, I can on my loaded copy and once past the initial issue it works properly.

 

Any insight would be welcome.

 

Regards

See the Pen VwvLMjq by B0nef1sh (@B0nef1sh) on CodePen

[ZachSaucier]

Hey B0neF!sh. This would be a lot more simple without ScrollMagic. But either way animating the height of a static element in a scroll animation is the main cause of jitter. I recommend you fix the header.

 

Also, your markup is pretty complicated - I suggest simplifying it a bit. Here's how I'd set it up:

See the Pen BaoNGdd?editors=0100 by GreenSock (@GreenSock) on CodePen

 

GreenSock is making its own scroll plugin which can handle this for you (with throttling built in). But until then this approach will do  

[Winslow]

Hey thanks, appreciated very much. The less plugins I can use the better.  I've been working this off and on for quite a while but never getting it smooth. This should work nicely!  Tween on! 

[Winslow]

OK, so ScrollTrigger is up and running. I cannot for the life of me get this to execute on scroll. No matter what I try as the trigger and/or start, the tween executes immediately without scrolling. Have a codepen but cannot insert it here.

See the Pen gOPMOxW by B0nef1sh (@B0nef1sh) on CodePen

 

 

[ZachSaucier]

Hey B0nef!sh. Several issues. The main one is that you're not loading ScrollTrigger  To load ScrollTrigger, make sure you're using at least GSAP 3.3 and load the ScrollTrigger file.

 

Besides that, "$('body')[0]" is invalid. It looks like you're trying to use jQuery for some reason (it's also not being loaded but is not needed anyway - document.body is exactly what that code would return anyway) but your selector is in a string so GSAP would try to interpret it as a selector string. But that's an invalid selector string, the proper one would just be "body". But I wouldn't use the body as the trigger, I'd use the header as the trigger.

 

You'd want it to start when the header is at the top of the viewport and end when the nav is at the top of the viewport + the new height of the header. You can do that by using a calculation or by setting the endStrigger to the nav and a calculation. 

 

In terms of how to handle the nav pinning once it's at the top, you could keep it in the original timeline like I did before: 

See the Pen bGEeejv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

But if you set scrub to a number you would see that it doesn't keep pace with the header. If you really want to set scrub to a number so that it's animated more, I would recommend restructuring your HTML to include the nav in the same container as the header and animate the position of the nav inside of the timeline. If you want to do that and are having trouble setting it up let us know.

 

Happy tweening!

[Winslow]

Well, yeah, hard to get it to work without it loading. I wasn't getting the markers so I knew something was up however I had no errors in the console.  Being a newbie for front end , where would you look to see that scrolltrigger, jquery didnt load? I was getting the tweens so I didn't think to look. 

 

As for body, I tried header plus anything else, and again, loading helps a little.

 

and for scrub, I have some parallax working elsewhere with scrub:2  and I like the way it makes one of the sections kind of glide so I just threw it in there.

 

All that being said, I really appreciate your help and thoughts, trying to learn ScrollTrigger, GSAP, ...+ without being well ensconced in HTML, CSS, and JS seems to be hard on all of us. It's very helpful that you explain the what not's and why to for's. 

 

I believe I can get this working now with your example and explanation. thanks again.

[ZachSaucier]

8 minutes ago, B0nef!sh said:

where would you look to see that scrolltrigger, jquery didnt load

You can look in the developers tools console to see errors and warnings. Or the resource panel to see what things are loading.

 

In CodePen you can. find the resources by clicking the cog next to "JS".