Pin the first visible elements

[Androlax]

Hello,

 

I've made a basic animation which reveal text when scrolling. My issue is, when you are just coming to the page, the text is already revealed, but I would like to be able to scroll through the first paragraphs, and then continue on the others one.

 

Here is the codepen as the example : 

 

 

Basically, the main issue is, when arriving to the page, as the scroll trigger is triggered by the top of the .line and when the bottom of the viewport reach that top of the .line, it starts the animation.

The problem is, when coming first to the page, it should be triggered by the top of the viewport to the top of the first .line classe and then, when animation of reveal are ended on those .line, it should scroll down to the others .line which are working fine.

 

I tried a lot of stuffs, pinning the first paragraphs visible in the paragraph in a div, etc...

But it don't works as expected 😕

See the Pen KKEzdoa by androlax2 (@androlax2) on CodePen

[Windpixel]

Hi Androlax,

 

If your first element is pushed against the top of the viewport and you want it to "do a thing" on scroll, it will be a little bit of a race.

One approach is to:
1. Create a timeline which has a single scroll trigger applied to it.

2. Use the parent Element as the trigger

3. We want to add a bunch of tweens to the timeline (which we might not know how long it is)
4. Change the "end" value to adjust the speed of the animation (lower value = faster, higher = slower.

Here is the first codepen. Ill be back with another shortly using splitText because this is a good case for it IMO

See the Pen QWoNjPv by windpixel (@windpixel) on CodePen

 

[Androlax]

Thank you for your answer, I kinda thought of using timeline, but the problem is, I still want the line to be used as a scroll trigger as you can see in my example. To have that effect of "reading" the text while scrolling down.

 

If It's too hard / impossible to do what I want, the solution I've is to have an animation to "read" all the lines that are visible on screen and lock the scroll till the animation is completed.

 

The main thing needed in my case was to be able to kinda "separate" the logic in two blocks : 

 

- What is visible,

- What is not,

 

The - What is not part is the easiest one, and already made.

 

The - What is visible part is the hardest one, the ideal scenario would be to :

 

- Start scrolling,

- "Pin" the first visible lines and make it "read" the lines

- When all those lines has been "read", continue with the normal flow 

 

I tried a lot with pin and stuff like that, but I was continuously into the problem of : I still need the lines to be triggered by the scroll, so you could scroll in the pinned element, but it should take into account the amount you scroll and calculate which line you should be read

[GreenSock]

There are several approaches you could take - here's one: 

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

 

There are other more complex approaches, but they creep beyond the scope of help we can provide in these free forums. They'd basically involve calculating the ratio of the visible lines, compared to each non-visible one and laying them out in one long timeline accordingly. Definitely more complicated, but maybe the approach above gets you most of what you want. 

 

Good luck!

[Windpixel]

Here is also another solution to consider where we pin scenes, play a staggered set of animations, once those are complete the scene will kill.

I love this because you don't need to worry about where to place the end point of your scroll trigger, or worry about how many tweens you add to the timeline, the scroll will just unpin once its timeline is complete.

See the Pen QWoNjPv by windpixel (@windpixel) on CodePen

[Androlax]

Thank you a lot for your answers @Windpixel & @GreenSock.

I didn't knew about a lot of methods you just used, I'll keep that in mind for later.

 

@GreenSock What would be the main benefits of going for the complex scenario you mentioned ? What is the benefits over the solution you just made ?

[GreenSock]

3 minutes ago, Androlax said:

@GreenSock What would be the main benefits of going for the complex scenario you mentioned ? What is the benefits over the solution you just made ?

In the simpler solution, if you scroll quickly forward/backward, you can see that the non-visible ones start/end in a slightly overlapped fashion (timing-wise) with the visible ones. That's just a logical consequence of the fact that you've got a scrub of 1 second on all of them. The first (visible) tween is scrubbing 1 second across all those whereas each individual line of the non-visible ones scrubs 1 second across only one singular line. So if you shove them ALL into a single timeline, you could force that scrub to be 100% consistent with no risk of any overlap. 

 

But like I said, that's significantly more complex to implement. If you need help, you'd probably need to hire someone (we do offer paid consulting services). But again, you'd only really notice this if you scroll quickly on that initial part. And honestly, would anyone really care if there's a slight overlap timing-wise on that one part? Probably not. But that's your call.