Jump to content
Search Community

Scrolling upwards from bottom of page

Flawe test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello,

 

I'm hoping this isn't a really dumb question, but I'm trying to create a website where the user starts at the bottom of the page and scrolls up to the top.

Using a to() function doesn't work very well as the object is already at the position I want to move it to if I'm scrolling upwards.

I tried using from(), but this also does not work correctly, as it jumps back to the original set position between animations (see code pen).

I could potentially use a set() between each section in the timeline, or use fromTo() and explicitly set the original position to be where the previous one stopped, but I was wondering if there is a better approach such as doing a to() in reverse or somehow starting the scroll animation at the bottom and finishing at the top?

 

Thanks for any help/suggestions :)

See the Pen BaJdbYy by jesseaudley (@jesseaudley) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the forums @Flawe

 

14 minutes ago, Flawe said:

I'm hoping this isn't a really dumb question

 

I do believe you're the first to ask that question. Not dumb, just strange as ScrollTrigger was designed to go from top to bottom or left to right. If you need it in reverse, you're probably going to have to do everything yourself in callbacks, and I wouldn't count on any pinning behavior to be what you expect. 

 

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

 

Link to comment
Share on other sites

Or just code it in reverse. Think of the scrollbar as a scrubber. It's a little bit like you're going to YouTube and you want the video to play starting from the end, moving toward the start. It's not like they'd have to re-make the video in a totally opposite way - it's the same stuff happening just in reverse. Same for ScrollTrigger - it's made to handle the scrollbar going in either direction. The challenge for you would probably just in the way you think about it. The development process may feel weird starting at the end and going backwards (as is watching a movie in reverse) :)

 

Link to comment
Share on other sites

Thanks for the replies :)

The code pen with it working in reverse certainly is interesting, though I will have to do some digging to figure out exactly how you got that to work.

Either that or just box on as Greensock mentioned - I certainly was getting somewhere even if it breaks my brain a little bit working in reverse!

 

Thanks again!

Link to comment
Share on other sites

8 minutes ago, Flawe said:

Either that or just box on as Greensock mentioned - I certainly was getting somewhere even if it breaks my brain a little bit working in reverse!

 

Creating something complicated in reverse would definitely break my brain too 😵

 

8 minutes ago, Flawe said:

though I will have to do some digging to figure out exactly how you got that to work.

 

You can animate a bunch of different properties on a Timeline/Tween, like timeScale, time, totalTime, progress, totalProgress, etc. Basically all ScrollTrigger is doing for scrub animations is what I just showed. If you remove the 1 - from 1 - self.progress, you'll see it play normally.

 

  • Like 1
Link to comment
Share on other sites

Great, that all makes sense, the only thing left unclear for me is why you have the timeline paused and use onUpdate. 

I assume scrolling counts as an update event so we no longer need to have scrub = true?

 

Edit: Re-reading what you said a couple more times, I'm pretty sure that's what you meant by "Basically all ScrollTrigger is doing for scrub animations is what I just showed."

 

All makes sense now :)

Thanks for the explanation!

  • Like 1
Link to comment
Share on other sites

Sorry, one more question for you, this works well, but it makes it feel like it has a delay, i.e. as if scrub = 1.

I would guess this is due to some delay in the onUpdate function, but thought I'd see if you had any ideas to make it feel more responsive?

No worries if it just has this delay since this is a bit of a work around as it is :) 

 

Thanks so much!

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