Jump to content
GreenSock

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

ScrollTo window 'bounce' reveal on load

Recommended Posts

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

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

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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

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).

  • Like 1
Link to comment
Share on other sites

 

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 ?

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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!

 

 

 

  • Like 1
Link to comment
Share on other sites

 

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

 

 

  • Like 2
Link to comment
Share on other sites

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

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.
×