Full transition animation from the first screen

[RubberFruit]

 

Hi guys ! I'm trying to make a transition animation from the first screen to the second, but it doesn't work out completely.

1) How it should look like: the horizontal text scrolls to the left, reaches the vertical scroll, the vertical text scrolls (to vertical4 in the example),

and then a decorative block with a white stripe goes from top to bottom, which disappears after a moment and the main section smoothly scrolls to the second one and all this time the main section is in the pin state, the user does not have to "scroll" the page.

 

What goes wrong: a decorative block with a white strip appears, but only (!!!) after the 1 section exits the pin state and scrollTo for some reason does not work, but rolls back the previous animation ( Please help!

 

2) I couldn’t show this with an example, but for some reason my ScrollTrigger of the next section works locally as if the first section is not in the pin state. Why can this happen?

 

3) This project will have a fixed block (small picture with message), which, while scrolling throughout the document, will change its coordinate. (section 1 - init position, section 2 - smooth movement to another fixed position, section 3 - smooth movement to another fixed position) How can I implement this?

 

Please help, I will be eternally grateful!

See the Pen LYBeyJP by rubberfruits (@rubberfruits) on CodePen

[Cassie]

Hey there!

 

It's largely down to getting your trigger points in the right place. It's a lot easier if you use markers for debugging.

Here's an option using the previous scrollTriggers 'end' point as a 'start' position

 

  ScrollTrigger.create({
    animation: mopTl,
    trigger: $mainSection,
    invalidateOnRefresh: true,
    once: true,
    scrub: false,
    start: self => self.previous().end,
    markers: true,
    id: 'mop'
  });

 

See the Pen BaPJwGR?editors=0010 by GreenSock (@GreenSock) on CodePen

I'm not going to get rid of the user's scroll for you, it's pretty bad UX to do that, but here's some information if you do pursue it!

https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily

 

Hope this helps!

[RubberFruit]

13 hours ago, Cassie said:

Hey there!

 

It's largely down to getting your trigger points in the right place. It's a lot easier if you use markers for debugging.

Here's an option using the previous scrollTriggers 'end' point as a 'start' position

 

  ScrollTrigger.create({
    animation: mopTl,
    trigger: $mainSection,
    invalidateOnRefresh: true,
    once: true,
    scrub: false,
    start: self => self.previous().end,
    markers: true,
    id: 'mop'
  });

 

 

 

I'm not going to get rid of the user's scroll for you, it's pretty bad UX to do that, but here's some information if you do pursue it!

https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily

 

 

 

Hope this helps!

 

Hi, yes, that helped a lot, thanks a lot! Do you think it's better to leave the user to scroll?

 

What could be wrong with the problem I described in point 2? Is there also a better way to track the start of the ScrollTrigger after the animation ends with the first section?

 

Are there any examples of animating a fixed block across the entire document? I thought about attaching a trigger to the "body" and tracking it. Is this a good idea or is it better to do something differently?

 

[Cassie]

Heya!

100% yes. Let the user control their own scroll.

Quote

Hi, yes, that helped a lot, thanks a lot! Do you think it's better to leave the user to scroll?

 

I don't understand your second question though, sorry - could you elaborate a little?
 

Quote

Are there any examples of animating a fixed block across the entire document? I thought about attaching a trigger to the "body" and tracking it. Is this a good idea or is it better to do something differently?

It's hard to advise without knowing exactly what you're after. I would try to avoid animating layout props like top/left and use transforms instead. FLIP plugin is great for animating between layout positions. But this may be easier than that? If you're just moving a block around the viewport you could probably just use vw and a fixed container

 

See the Pen xxJpaEr?editors=0010 by GreenSock (@GreenSock) on CodePen

[RubberFruit]

4 hours ago, Cassie said:

I don't understand your second question though, sorry - could you elaborate a little?

 

At the moment, it works as if the ScrollTrigger from the second section does not know that the main section is in the "pin" state and about 1/3 of the animation of the main section, the animation of the next section begins (as if the main section is not in the "pin" state)

 

4 hours ago, Cassie said:

It's hard to advise without knowing exactly what you're after. I would try to avoid animating layout props like top/left and use transforms instead. FLIP plugin is great for animating between layout positions. But this may be easier than that? If you're just moving a block around the viewport you could probably just use vw and a fixed container

 

My page will consist of 5-6 sections and when we scroll the fixed block should move smoothly (no scrub). Example: 1 section - the block is in its original position - left:50%; bottom:50px;, 2nd section - fade to left:60%; bottom:100px; etc.

 

FLIP plugin? Ok, thanks, I'll definitely take a look and figure out how to use it!!)

[Cassie]

Nope, sorry, I'm not understanding this at all.
 

Quote

At the moment, it works as if the ScrollTrigger from the second section does not know that the main section is in the "pin" state and about 1/3 of the animation of the main section, the animation of the next section begins (as if the main section is not in the "pin" state)

 

I've got rid of the scrollTo and the white bit for clarity -

See the Pen PoBELmJ?editors=0010 by GreenSock (@GreenSock) on CodePen

The second section's start trigger is in the same place as the first section's end trigger. It's starting exactly where I would expect, right where the markers show the start position to be - What is it that you're expecting to happen? Can you explain a little more clearly?

[RubberFruit]

21 hours ago, Cassie said:

The second section's start trigger is in the same place as the first section's end trigger. It's starting exactly where I would expect, right where the markers show the start position to be - What is it that you're expecting to happen? Can you explain a little more clearly?

 

I found where the error was ... I launched the animation for the first section after the window.load event, and for the second section without this event ...)) Thank you very much for all help))

[RubberFruit]

On 1/21/2023 at 8:29 PM, Cassie said:

Nope, sorry, I'm not understanding this at all.
 

 

I've got rid of the scrollTo and the white bit for clarity -
 

 

The second section's start trigger is in the same place as the first section's end trigger. It's starting exactly where I would expect, right where the markers show the start position to be - What is it that you're expecting to happen? Can you explain a little more clearly?

 

 

I have one more question)) How can I make it so that the animation of the vertical text is applied animation so that "1 scroll with the mouse wheel" = "1 change of the vertical word"?

I can't figure out how to do this because the timeline is attached to an animation that:

1 - scrub

2 - main section is in pin state

3 - animation should start after scrolling horizontal text(

[Cassie]

I have a feeling that you're trying to emulate events, trying to 'jump down' to a section automatically feels like that.

You're trying to do this sort of thing right?

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

 

If so - This isn't going to be a scrollTrigger solution - you'll have to look into observer for that. ScrollTrigger understands scroll distance, but doesn't have a concept of 'one scroll with the mouse wheel' that's an event, not a pixel distance.

I would advise against mixing up normal scrolling and event driving scrolling like this unless you really know what you're doing and you're going to test extensively. It's quite jarring to jump from normal scroll, to event driven scroll and back to normal scroll again. As I mentioned in the post earlier - there are going to be UX/accessibility implications because you're hijacking how the user navigates.

Here's an example of mixing observer type events and normal scrolling - 

 

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

 

[RubberFruit]

1 hour ago, Cassie said:

I have a feeling that you're trying to emulate events, trying to 'jump down' to a section automatically feels like that.

You're trying to do this sort of thing right?

 

 

If so - This isn't going to be a scrollTrigger solution - you'll have to look into observer for that. ScrollTrigger understands scroll distance, but doesn't have a concept of 'one scroll with the mouse wheel' that's an event, not a pixel distance.

I would advise against mixing up normal scrolling and event driving scrolling like this unless you really know what you're doing and you're going to test extensively. It's quite jarring to jump from normal scroll, to event driven scroll and back to normal scroll again. As I mentioned in the post earlier - there are going to be UX/accessibility implications because you're hijacking how the user navigates.

Here's an example of mixing observer type events and normal scrolling - 

 

 

 

 

 

 

Thanks for the answer! No, I abandoned the idea of scrolling to sections, I wanted to know if it is possible to combine the scrub animation of the horizontal text scroll and the scroll (which you showed in the example) for vertical text))

[Cassie]

Quote

I wanted to know if it is possible to combine the scrub animation of the horizontal text scroll and the scroll (which you showed in the example) for vertical text))

 

Nope. I'm lost. Sorry.

Try explaining again? The best way to explain is to use as little jargon as possible and just step through visually what you'd like to happen. Jargon gets translated in different ways in peoples heads.

Permission granted to talk to me like I'm 5 and I've never used GSAP or coded anything in my life.

[RubberFruit]

14 hours ago, Cassie said:

 

Nope. I'm lost. Sorry.

Try explaining again? The best way to explain is to use as little jargon as possible and just step through visually what you'd like to happen. Jargon gets translated in different ways in peoples heads.

Permission granted to talk to me like I'm 5 and I've never used GSAP or coded anything in my life.

 

There is probably a problem with the translator, so it's hard to understand me, now I'll try)) The site is loading, I start scrolling, the main section does not scroll (that's why the pin is set in the settings), at this time the horizontal scrolls (just like it works now, in the codepen above, with the scrub setting - scrolled a little, the text scrolled a little), scrolls to vertical text, but vertical text scrolls differently - no matter how much we scroll, exactly 1 smooth iteration of the vertical text scroll animation is played, which is not tied to scrub (now the vertical text scroll animation plays exactly the same as the horizontal one)

 

 

The problem is that this is one timeline, which for horizontal text should work as it does now, and for vertical text there should be an iterable animation and I don’t understand how to do it(

[Cassie]

I don't know what you mean by 'one smooth iteratation' or 'iterable' in this sense

Do you maybe want the vertical animation to not be tied to scroll? Like this?

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

[RubberFruit]

On 1/24/2023 at 1:07 PM, Cassie said:

I don't know what you mean by 'one smooth iteratation' or 'iterable' in this sense

Do you maybe want the vertical animation to not be tied to scroll? Like this?
 

 

No, I had it tied to the scroll, but each scroll scrolled the vertical text 1 word up, not just the number of pixels up) Is this real?

[Cassie]

Quote

No, I had it tied to the scroll, but each scroll scrolled the vertical text 1 word up, not just the number of pixels up) Is this real?

 

You're describing Observer again. Or maybe snapping?

 

See the Pen mdjLXvY?editors=0011 by GreenSock (@GreenSock) on CodePen