Jump to content
Search Community

scroll down animate horizontally, scroll up skip horizontal animation

Chris Prieto test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

This might be more scollmagic based but banking on the good graces of someone smarter than me and maybe it will prove useful to someone in the future.

 

So I was trying to to do this thing where when scrolling down the site moves horizontally when you enter a specific section. But it became cumbersome to scroll back up and have to view the animation in reverse. I set that animation to reverse:false which deff stops the animation when scrolling back up but it is left with a giant inline padding-top. I assume this padding is required to allow space to scroll for the horizontal animation.

 

all and any insights much appreciated 

See the Pen xvRxYj by ionz149 (@ionz149) on CodePen

Link to comment
Share on other sites

Thanks ya'll!

 

3 hours ago, ZachSaucier said:

Why not just detect when the user is scrolling upwards and remove the padding-top on .scrollmagic-pin-spacer

 

If you wanted to wait until the user has scrolled through the entire section before cancelling it, put the reverse: false and padding removal in the onComplete for that section.

 

@ZachSaucier Mostly because I am at best utilizing the Mr. Magoo approach and am blindly wandering thru all the things with accidental results haha

 

I am on the verge of a cold or something so I am not firing on all cylinders right now so I want to clarify a few things.

 

1. I tried that and it is not that great but I may have done it wrong: 

See the Pen PoYaxgw by ionz149 (@ionz149) on CodePen

 I don't see the padding when I scroll up ex anticipated but once I pass the animation and the reverse:false kicks in I end up with the same padding spacing when scrolling down. Kinda of close but I'm not getting how to only allow that padding to show when the animation is active and hasn't been completed.

 

2. I think this is more what I am after however it is more to wrap the noodle around. I would add the onComplete to the timeline in question. But then how do I use that to control the scene's reverse:false or the padding? 

 

@mikel The answer might be there but I fear I am too dense to spot it. Are you suggesting I look into destroying the scene?

 

 

Link to comment
Share on other sites

TL;DR: I dislike ScrollMagic and think there are better ways to do this :) Exactly what the better approach is, I'm not sure, but I sure do dislike ScrollMagic.

 

See the Pen JjPZwQo by GreenSock (@GreenSock) on CodePen

 

This is what I was suggesting you do onComplete:

 

onComplete: function() {
  // destroy timelines
  horzScene.destroy();
  processScene.destroy();
  // remove added styles
  TweenMax.set(".scrollmagic-pin-spacer", {clearProps: "all"});
  //keep window in place
  scroll(0, innerHeight);
}

It seems like preventing reversal before the completion will have that padding issue. I don't have the time to try and debug that situation :) 

 

I think the methodology of ScrollMagic to fake scrolling by using padding is fundamentally flawed.

  • Like 2
Link to comment
Share on other sites

@ZachSaucier I would tend to agree with you. This approach to the side scrolling effect has always seemed kinda hacky to me but I don't know how else to do it (fart sound)

 

That said thanks again for your help here Zach. In my learning of javascript I seem to not be thinking globally or big enough. I have this notion that everything has to be super specific to itself but looking at this code it's so straightforward. With your code I was able to get this working in a pretty cool manner:

 

See the Pen RwbJmWp by ionz149 (@ionz149) on CodePen

  • Like 1
Link to comment
Share on other sites

Spoke too soon but it's so darn close! I think I butchered your code by moving onComplete from the the last tween of the 'processTl' to the 'bloopTl' after it so that the clearing of props/class adding happens off screen. That seems to cause the page to jump a lil once you are passing the horizontal section.

 

Your codepen does not jump but the horizontal section('processTl') gets big white gap before its out of view since the props get cleared before it is out of view.

 

I broke down your function and I get the .destroy() of the scenes/timelines. I get the clearing of props but what I dont get is this guy: 'scroll(0, innerHeight);'

 

It says its keeping window in place but it seems to only do that in your example haha. I commented it out and the jump was less intense but I feel like I am missing something super obvious to make that jump go away.

Link to comment
Share on other sites

15 hours ago, Chris Prieto said:

what I dont get is this guy: 'scroll(0, innerHeight);'

If you remove that line in my example you can see that it will jump down to the bottom section. This is because it's trying to keep its scroll position after the padding has been removed but that's much "further" down the page. So I am manually setting the scroll position to where it should be. In the demo you provided, that conveniently is 100vh down from the start of the page (scroll() is short for window.scroll() and innerHeight is short for window.innerHeight).

 

In your demo it would probably be best to calculate where the top of the last section is on scroll and force the window to scroll to that position when you change the sizing of the other elements.

  • Like 1
Link to comment
Share on other sites

On 9/14/2019 at 8:10 AM, ZachSaucier said:

In your demo it would probably be best to calculate where the top of the last section is on scroll and force the window to scroll to that position when you change the sizing of the other elements.

 

Thanks for this. I think I get what you are saying and I tried but now it jumps to the process timeline. I added these two vars:
var bloopEl = document.getElementById('bloop'); ~ I tried changing to footer as well
var distance = bloopEl.getBoundingClientRect().top; ~ i tried bottom too

 

and then replaced the zero with the distance var:
scroll(distance, innerHeight);

 

See the Pen RwbJmWp by ionz149 (@ionz149) on CodePen

Link to comment
Share on other sites

Sorry, I don't have time to breakdown exactly what's happening here today. All the different scrolling timelines is a bit much to wrap one's head around :) 

 

22 minutes ago, Chris Prieto said:

then replaced the zero with the distance var:
scroll(distance, innerHeight);

The first parameter is the 0 scroll position, the second is the y. Not sure why you're setting the horizontal scroll position...

Link to comment
Share on other sites

2 minutes ago, ZachSaucier said:

Sorry, I don't have time to breakdown exactly what's happening here today. All the different scrolling timelines is a bit much to wrap one's head around :) 

 

The first parameter is the 0 scroll position, the second is the y. Not sure why you're setting the horizontal scroll position...

 

ugh, oh well... you would stab your eyeball with a dull pencil if you saw the real code ?

 

I was setting the scroll position wrong because I am crashing and burning right on thru this thing haha. Adding distance variable to the y position still resulted in jumping. Perhaps it's matter of getting the distance variable to calculate the correct number (which I can totally be doing wrong) and that firing at the correct time ... or not *shrug*

 

Additionally I recreated using ScrollMagic code instead of doing it in a timeline and ended up with the exact same results so that is promising. I've gotten both the timeline based and scrollmagic based example down to a slight stutter of a jump but it's still noticeable. This might be as good as I can get it but will keep banging my head against it.

 

gsap timelines: https://codepen.io/ionz149/pen/RwbJmWp

scrollmagic: https://codepen.io/ionz149/pen/mdbGEwj

Link to comment
Share on other sites

18 hours ago, ZachSaucier said:

Good work! It looks like it's because the event is fired at the end of the SVG (before the end of the wrap section is scrolled to). I bet you can fix that.

 

@ZachSaucier Wow, that is crazy. I had kind of admitted defeat and then your vote of confidence got me all motivated. I made a few attempts to fix it.

 

First I tried to make the svg height:100% in css, seemed obvious but did not change anything. Then tried to use the svg/wrap div bottom position and basic math to get a different number for the scroll y coordinate, which got pretty close but always left a small jump. I don't really feel this is correct approach.

 

But after a few hours I can confidently say I have no idea why the event is firing off at end of svg or what I need to do to make fire off at end of wrap instead.

  • Haha 1
Link to comment
Share on other sites

1 hour ago, Chris Prieto said:

I have no idea why the event is firing off at end of svg or what I need to do to make fire off at end of wrap instead.

Sorry, I don't really understand ScrollMagic that well. I was wrong when I said it is firing off at the end of the SVG (it was just very close to that on my screen at least). The difference is caused by your triggerHook of 0.2. Changing it to 0 fixes the jump in the most recent demo above. It just fades in the elements later than I'm betting you're wanting, so I would change the triggerHook and maybe make a new scroll timeline for the fade in of the elements.

  • Like 1
Link to comment
Share on other sites

haahaha damn that would've taken me a few days to randomly zero out. Thank you and no need to apologize, you have gone above and beyond. I got both pens working now. However my local page is still giving me grief. But the pens work so I know it is possible just gotta figure out what it is now.

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.
×
×
  • Create New...