scrollTo, what's wrong here

[celli]

This is so simple! and I've done this a lot before, but for some reason I can't get this simple scrollTo to work, again! I've tried to get it to scroll in a few different ways (which I commented out in the codePen), and I've rebuild it a few times in different ways--but still for some reason, I can't get it to fire and the window to scroll. I must be doing something wrong, but I can't seem to find out where the mistake is....

See the Pen yezQRE by celli (@celli) on CodePen

[PointC]

Hi celli  ,

 

Just a couple small changes in the CSS and this works just fine. Please try this:

See the Pen EPwrrQ by PointC (@PointC) on CodePen

 

[celli]

oh man, that's awesome PointC ! I see with the CSS html, body{width:100%; height:100%;} it causes it not to work... I think that's where I was going wrong the whole time--you really saved me from going absolutely crazy today

[celli]

Hi PointC! or anyone else who might offer some insight... I hate to re-hash this post again!

 

Check out this updated codePen: 

See the Pen RreBLW by celli (@celli) on CodePen

 

I added some scrollMagic to bring my '.otherContent' y-position up a bit when we scroll to get that parallax effect... which works great--but when I now click either '.ghost1, .ghost2' buttons to scroll to my anchor, it scrolls too far, probably because I've now changed the y-position of that '.otherContent' which is under the top-content. It should stop at the red square called '#top' (and will do that when I remove the scrollMagic which changes the y-position). I tried to compensate for the y-position at -400px, or clearProps to maybe remove the positioning--but I can't seem to figure out a way to still keep the parallax, and also get the scrollTo to stop at the red square's top called '#top' ... any help is appreciated

[PointC]

Hi celli  ,

 

You're exactly right - you just need to adjust the y position. I was able to compensate for your offset by changing your tween to this:

TweenLite.to(window, 2,{scrollTo:{y:position1-375}, ease:Expo.easeInOut});

Once I made that change, everything looks right to me - you should get the correct stopping point while retaining the parallax effect. 

 

[celli]

Thanks pointC ! I just tried that again on the same codePen 

See the Pen RreBLW by celli (@celli) on CodePen

 but if you see it doesn't really reach the right spot, which would be the top of the red box. Also when resizing the window, it brings the anchor to a different position all together, which is what the window.resize function controls, which works fine when I remove the parallax... what do you think ? I'm banging my head against a wall trying to see why this could be.

[PointC]

o.k. - please see if this is more what you need?

 

See the Pen PZyVQr by PointC (@PointC) on CodePen

 

 

Edit - nope - my mistake - that removes your parallax. 

[celli]

yep, that does it, but removes the parallax. Thats why it's so strange... It should work to compensate the y distance--but it doesn't. maybe it's the syntax in 'position1-400' that isn't right, because I noticed that also only allowed it to fire once.

[celli]

Hi PointC, It's funny, this is different--but this works: 

See the Pen PZyvJg by celli (@celli) on CodePen

I am animating the background-position instead of the Y-position of the bottom container... but while animating the background-position, I have always experienced it to be a little jittery (you can notice it in the codePen), and the effect is also a little different.

 

But I could not find a way to keep the y-position animation, and at the same time use the GSAP scrollTo properly. Maybe someone out there has a solution or has encountered this before ...

[PointC]

Hi celli ,

 

Sorry - I had to be away from my computer for a bit and didn't have a lot of time to look at it again. Looks like you found a good solution though.

 

I'm not sure why the math doesn't work on your other version, but like you said, maybe someone else has done this effect with more success and can post some thoughts.

 

I've been doing some parallax effects for some galleries recently, but I've been using absolutely position elements and animate the background position along with a clip animation which woks quite well.

 

Anyway - I'm glad you have a working solution.

[celli]

I also seemed to have figured out a solution to avoid the jitters when animating background-position on scroll. It's now again, a slightly different effect, but it appears almost the same. I did these two things in my CSS, and for some reason it removes the jitters:

 

• apply background-attachment: fixed;
• reverse the scrollmagic transform direction

I guess moving the y-position with GSAP/scrollmagic while using scrollTo on another element on CLICK is not the best way to go--because it can;t seem to find the right place to stop, however it seemed to be the smoothest and most fluid way to move things... as you said, maybe some can shed more light . Thanks again PointC!