Brodiero Posted September 8, 2020 Share Posted September 8, 2020 I'm trying to create a simple 'bounce' when a page is loaded to reveal content above and/or below a 100vh. The idea is that coming from an anchor link or another page to a 'full page' the user will get a glimpse at content above/below before the page settles and avoid an ugly 'scroll for content'. I'm trying to get it to scroll up/down x pixels but it goes to the first/top element/class, not the current anchor point or page position but i'm new to js & gsap and would appreciate some pointers. See the Pen rNeJBrQ by brodiero (@brodiero) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted September 8, 2020 Share Posted September 8, 2020 Hey @Brodiero If I understand correctly, you just want a portion of the black section to show? In this scenario, you could simply just feed in absolute values to scroll to .to(window, { duration: 1, scrollTo: { y: 250, offsetY: -50}}) .to(window, {duration: 1, scrollTo: { y: 250, offsetY: 50}}) .to(window, { duration: 1, scrollTo: { y: 250, offsetY: 0}}) Or make it dependent on the window-height .to(window, { duration: 1, scrollTo: { y: window.innerHeight/2, offsetY: -50}}) .to(window, {duration: 1, scrollTo: { y: window.innerHeight/2, offsetY: 50}}) .to(window, { duration: 1, scrollTo: { y: window.innerHeight/2, offsetY: 0}}) Also, I don't know if you knew this, but you can also use eases with scrollTo, maybe the elastic one in your case .to(window, {duration: 3, scrollTo: 250 , ease: "elastic.out(1.75., 0.75)", y: -50 } ); This way you'd only have one tween instead of 3 - You'd have to tweak the timing to get the actual effect you desire, but maybe it fits for you. The ease visualizer might come in handy for tweaking things. Here's a pen with different options (commented out). Let us know if any of it feels like what you want to achieve. See the Pen d50b51fd339a0dbaeef74332ed95740a by akapowl (@akapowl) on CodePen Cheers, Paul 2 1 Link to comment Share on other sites More sharing options...
Brodiero Posted September 8, 2020 Author Share Posted September 8, 2020 Hi @akapowl thank you for the thorough examples and explanations, much appreciated. The issue i'm trying to solve is the unknown height/position of the 'landing' page. I want to be able to use anchor and/or links from other pages to scroll to a page position, then have gsap 'takeover' with a final up/down nudge, so to speak. The elastic ease was an implementation i tried but the real issue is getting gsap to scroll-by, rather than scrollTo, if that makes sense? ie www.random.com/page1.html/#id2 page1.html loads at #id2 anchor then > scrolls up X > down by X and settles at 0 Does that make sense? I feel like i need to create an array and gsap then uses the nearest but have no luck with the implementation Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 8, 2020 Share Posted September 8, 2020 12 minutes ago, Brodiero said: the real issue is getting gsap to scroll-by, rather than scrollTo You could do something like scrollTo: document.documentElement.scrollTop + someValue. I don't really understand the goal still. Please make a minimal demo that recreates the issue if you'd like additional help (even if it doesn't use CodePen since regular pens can't load at a scroll position other than 0). 1 Link to comment Share on other sites More sharing options...
akapowl Posted September 8, 2020 Share Posted September 8, 2020 You could initially check for any # hashes in the URL and then add a new first tween in your tl, that either sets the ScrollPosition to that section or tweens to that (depending on what you prefer) - and then you add that bounce wiggle after that in your timeline. https://cdpn.io/akapowl/debug/mdPXMpa/bYMdyXnwJNbr#scrollHere See the Pen 943f25dcec40cefd740bfe0c61617c1f by akapowl (@akapowl) on CodePen Try viewing it in the debug mode provided above. Something like this ? 2 1 Link to comment Share on other sites More sharing options...
Brodiero Posted September 8, 2020 Author Share Posted September 8, 2020 2 minutes ago, akapowl said: Something like this ? Yes! That's exactly what i was looking for, thank you so much. I'm going to try and understand what you did. I'm sure it's pretty basic to yourselves but i'm at the basic level! 1 Link to comment Share on other sites More sharing options...
akapowl Posted September 8, 2020 Share Posted September 8, 2020 I noticed one thing though. If you put the URL like that with the ID at the end in your browser bar and hit enter, it will always have that section in viewport when loading. Even if your first tween was a .to()-tween. So if in any case you wanted it to initially animate to that section, you'd probably have to set it up something like that bounce .set(window, { scrollTo: { y: 0 } }) .to(window, { duration: 1, scrollTo: { y: '#'+link[1] } }) .to(window, { duration: 0.5, scrollTo: { y: '#'+link[1], offsetY: -50}}) .to(window, { duration: 0.5, scrollTo: { y: '#'+link[1], offsetY: 50}}) .to(window, { duration: 0.5, scrollTo: { y: '#'+link[1], offsetY: 0}}) ; with an inititial .set to 0, before the actual .to()-scrollTo-tween. https://cdpn.io/akapowl/debug/QWNQMoN/bZMQWEozQJXA#scrollHere See the Pen dd22e9073f5e24111a959b5adaae9303 by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
Brodiero Posted September 8, 2020 Author Share Posted September 8, 2020 That's very helpful, I think on shorter pages it may be a better implementation to hint at content outside the viewport whilst the bounce works for longer content. Got me thinking now thanks Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now