How can I fix text TEMPORARILY to the screen?

What I want: As I scroll down, the different columns of text appear one by one fixing themselves in the middle of the screen. Once the last column is aligned, them all scroll up together and disappear from the screen.

So far I can fix them to the screen but stay all the way, I need them to be temporarily

2 Likes

I am looking for the same exact thing right now. This was my inspo Designer as Writer — Page 9
Let me know if you found a solution!

I think I found a somewhat solution. Each part of the page should be individual page and then they should be stacked vertically How to make pages scroll vertically – Readymag Help, then the parts of the text just fixed on each page.
They used it in this template. ‘Readymag templates: Stories’

Hi, did you find a solution to this? This is the best I’ve found as well, however I don’t want my whole site to scroll vertically, just certain pages. It seems you have to make all pages vertically scroll?

@Leo, I suggest using fix positions + animations. The idea is for the text widget to be fix, make it appear (with move or opacity effects) then face out (again, with move or opacity effects.

Like this?

(ignore that this forum turns my link into my website card! oops. Just click it anyway to see the demo I’ve put together for you)

You don’t need to create them as any extra pages or anything. Just use the animate commands on scroll. Work out the total distance in pixels that they all need to move down, and divide it by the number of columns.

In this example, the total distance is 1800 pixels, so each one moves down by 600 pixels less than the last (the first one moves down 1800, the second one moves 1200, the last one moves 600). Once that distance has passed then they’re all at the same point and they start moving again together.

Hope that helps!

1 Like