GSAP,ScrollMagic - glitchy in between page sections

[dznrvijay]

Hi,

 

We are using Scrollmagic for scroll with GSAP animations. We are getting a white gap and jittering in between sections. Please help us to resolve it. We have searched the whole google but no solution for it. Please check this link http://dev.weareoax.com/sm.html 

 

Please suggest any alternative for scrollmagic that works with GSAP.

 

Thanks,

Vijay

[PointC]

Hi dznrvijay 

 

Welcome to the GreenSock forum.

 

I looked at your site in a few browsers and did not see any white gap between sections. I'm not sure what you mean by jittering. Do you mean the entire section as it scrolls or just the animations? ScrollMagic works quite well with GSAP so that would be my recommendation for you. Everything appears to be functioning correctly to me, but maybe others can see what you're seeing. Is it in all browsers? Have you tested on multiple computers and operating systems? Any additional details would possibly help us see what you're seeing.

 

It is hard to diagnose anything looking at a whole site. Could you duplicate the problem in a CodePen demo with just a couple of your sections?  Here's some info about that:

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

You could also post your question in the ScrollMagic support area:

 

https://github.com/janpaepke/ScrollMagic/issues

 

I wish I could offer better advice for you, but I can't see these gaps or anything that looks odd. I'm quite doubtful that it's related to GSAP since it's just animating values. What you're describing sounds more like a rendering problem. Possibly related to the particular browser or graphics card? or maybe the size of the SVGs that are being animated? I'm just guessing at this point. If you could duplicate the problem in a demo, that would really give us the best shot at troubleshooting it.

 

Happy tweening.

[Carl]

I had the same experience as PointC. Didn't see anything that looked like a gap or jitter.

[dznrvijay]

Hi, 

 

In Chrome working perfectly. Have an issue with Safari and FF only. Getting white gap with jumpy effect in between sections while we scroll. Please check screenshots below from below links;

https://www.dropbox.com/s/u741ok7m7x277k2/Capture.PNG?dl=0

https://www.dropbox.com/s/1rh02smj1euhfqt/IMG_0314.MOV?dl=0

 

Thanks,

Vij

[dznrvijay]

Hi Guys, Here is the codepen link 

See the Pen mWEOEg by dznrvijay (@dznrvijay) on CodePen

Please try to scroll UP and DOWN in SAFARI and FF you can see the white gap jumpy effect in between sections. 

 

Thanks,

Vijay

[OSUblake]

This is due to the way ScrollMagic handles sticky/pinned elements. From what I can tell, ScrollMagic does a posteriori detection to determine if a pinned element should be fixed. Basically, it reacts to changes after they happen. So the gap you're seeing is ScrollMagic moving your pinned element back to it's fixed position if you scroll past it. The white is the background color of the body element.

 

There are a couple ways to prevent this, but I don't know if they will work with ScrollMagic as I'm really not familiar with it. 

 

Use the CSS position sticky property with a polyfill for older browsers. Here's a good example of that.

See the Pen yNxPRy?editors=0010 by dudleystorey (@dudleystorey) on CodePen

 

Position hidden clones where you want your elements to be "stuck", and reveal them when the user scrolls past them. Here's a simple example of how to do that.

See the Pen ayGvD?editors=0010 by senff (@senff) on CodePen

 

If those don't work, maybe you could add some overlap to your elements so you won't see the white background if overscrolling occurs. Or maybe stack your pages, so they can only move 1 screen up or down.

 

.

[dznrvijay]

Tried OSUblake, But still stucks in between sections.

[OSUblake]

Well I don't know what you tried, but you can make your owner scroller with a timeline. It's not too hard...

 

See the Pen 46295694a457cc0c61f32a8153e26639 by osublake (@osublake) on CodePen

 

 

[PointC]

That is really nice Blake.

 

You inspire me and yet make me want to go back to bed and re-evaluate my mediocre skills.   

 

I'm always learning from you. Excellent work as always.

[dznrvijay]

Thank you! Will try and let you know.

[OSUblake]

Thanks!

 

What stood out to me while looking at the ScrollMagic code was the duration parameter. I thought that was an odd way to describe how much you've scrolled, so I wanted to see if you could use scroll position as the duration and start time for a tween, and sure enough, it worked out perfectly.