Smooth scrolling getting wrong coordinates at first because of scaling effects

[sakshamsaxena]

Hi J Since my project involves mostly ScrollMagic, I thought it best to report it here.

Right now I have a simple page containing multiple sections which are animated into view through ScrollMagic's triggers. That was simple. Elementary.

Next I implemented smooth scrolling on the links of a nav bar which would smooth scroll to respective sections. Easy, eh? That's what I thought, but the page ends up scrolling around 180-200 pixels below the required position.

I was flabbergasted and went on a rage, only after two weeks today I realized what was making it do this. I realized that when I removed the scaling property from the tween, things were perfectly normal!!

Also, before this realization, I had tried to use ScrollTo plugin but even that returned the same erroneous results. This made me double sure of it and thus I'm writing here.

So my issue in brevity is : "When the 'from' method of GSAP takes scaling value less than 1, the initial body length in pixels as well as the offsets of the sections are defined according to their 'scaled-down' sizes. This completely defeats the purpose of smooth scrolling as the value which the 'animate' method would take at the time when the section entrance animations have NOT taken place would always be UNDESIRED, though technically correct."

Smooth scrolling code:

    $("a").on("click", function(e){
       e.preventDefault();
       var target = "#"+$(this).data("page");//string
       var here = $(target).offset().top-20;
       $("html, body").animate({scrollTop:here},{duration:1500,queue:false});
    });

ScrollScene code (for one section only):

new ScrollScene({triggerElement:"#about"})
                        .setTween(TweenLite.from("#about", 0.7,  {x:"-500px", autoAlpha:0, scale:0.4 }))
                        .addTo(controller1).addIndicators();

Link with scaling property Link without scaling property

The two pages would look slightly different but that should not create any doubt. Had to present here the previous drafts, but the issue is precisely exhibited by them.

I hope you understand my issue. Thus I cannot exactly say that its an issue with ScrollMagic ONLY as GSAP could as well be at fault here.

Thanks

[janpaepke]

Hi, actually this is neither a ScrollMagic issue nor a GSAP issue. Both do exactly what they are expected to do.

What is wrong here is your calculations – more precisely your assumptions. At the moment of the calculation of the position of the element it is scaled to 0.7. So its offset is of course lower. Because the default css transform-origin is 50% 50% 0 the element is scaled from its center position. Thus the calculated offset and the desired one differ by element-height*scale/2.

To resolve this you could take the scale into account when calculating the offset, for example. It might also work (and be a lot more convenient) to change the transform-origin of the element to 0 0.

In any case bottom line is: ScrollMagic and GSAP are both doing what they are supposed to. You need to get the calculations right for the correct position to scroll to.

hope this helps. J