Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dznrvijay

GSAP,ScrollMagic - glitchy in between page sections

Recommended Posts

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

Link to comment
Share on other sites

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.

:)

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

.

  • Like 2
Link to comment
Share on other sites

Tried OSUblake, But still stucks in between sections.

Link to comment
Share on other sites

That is really nice Blake.

 

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

 

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

:)

  • Like 2
Link to comment
Share on other sites

Thank you! Will try and let you know.

Link to comment
Share on other sites

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. 

Link to comment
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.
×