Jump to content
Search Community

ScrollTrigger - How can I stop the Scroll, do animation, then continue scroll ?

Spin Interactive test
Moderator Tag

Go to solution Solved by Spin Interactive,

Recommended Posts

Hello,

 

At first, sorry for my english, I'm not a native english speaker.

 

I have a problem with ScrollTrigger. That's my first time using it, so maybe I don't do it correctly.

 

What I want

  •  First Scroll inside the div with the dog in background, to see the image entirely. When I do that, I do not want the content of the div (white rectangle) moves.
  • Second : When the dog is fully shown, I want to continue the "normal" scroll, by pinning the dog section, and having blue section who moves upside the dog.

 

What I have

  • The dog moves like I want, but the next section moves instantly
  • The content moves too, and pin after the first ScrollTrigger

 

Is that clear enough ?
Thanks if you look

 

See the Pen poeggRw by simon-gioffredi (@simon-gioffredi) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi there,

first off - as someone who only speaks one language - your English is great. 

I'm puzzling this over at the moment. I've got something *nearly* there working. It seems the key is in pinspacing.

If pinspacing is set to true - then padding is added to push down the subsequent section, this section then 'waits' for the pinned section to finish animating before catching up.

If pinspacing is set to false, then extra padding to push down the subsequent sections isn't added and you get the 'layered pinning' effect.

It seems like (if I understand correctly) you're after pinspacing: true initially, and then you want to swop out to pinspacing false.

I think this might involve multiple timelines? I'm going to have a cup of tea and then come back to this but this is where I got to so far!

See the Pen 5e23c806674dc89a3c1ef81d1c580fd0?editors=1111 by cassie-codes (@cassie-codes) on CodePen

  • Like 3
Link to comment
Share on other sites

 

Hi there from me too - welcome to the forums.

 

34 minutes ago, Cassie said:

I'm puzzling this over at the moment.

 

Same goes for me.

 

34 minutes ago, Cassie said:

It seems the key is in pinspacing

 

Yes, if you don't want the blue section to scroll up early, you'd actually want to pin the #first section (as @Cassie does in her codepen), so the pin-spacing has an effect on the later blue section. The problem though is, that if you then later on wanted to pin the .bg only, you'd have nested pins (even if not at the same time) and if I am not totally wrong about this, that is not within the possibilities of ScrollTrigger.

 

Either way I tried to think of this resulted in a problematic scenario when coming to the point where you're wanting to let the .content scroll freely again but have the .bg pinned. I might very well be missing something obvious though.

 

So I actually went back and took this recent thread as a basis for the following demos

 

 

Worth noting is, that I removed the flex from your main because it was causing me some troubles with the layout.

 

Following the suggestion in that thread, you'd get the layered pinning effect Cassie mentioned.

 

See the Pen 4e5bb48078ca459b868c2b517a90b450 by akapowl (@akapowl) on CodePen

 

 

 

You could add an extra scrubbing ScrollTrigger tween on the .content when the actual pinning is over for the 'duration' of the blue section scrolling up top ( which would be equal to the window's height ) to make it appear as if it was scrolling with the flow. Which would then look something like this

 

See the Pen e00ea13473f15fc85cab68f8b27e815c by akapowl (@akapowl) on CodePen

 

 

Again, I am not sure if I am overseeing something obvious here. But I couldn't think of a way but this that wouldn't result in any issue.

 

Maybe it helps, though.

 

 

  • Like 4
Link to comment
Share on other sites

  • Solution

Hi,


With both of you, I succeeded to do what I want :D
 

@Cassie You had perfectly right about pinSpacing. That was a problem.

I tried at first to put pinSpacing into variable, and when the dog's timeline finishes, refresh the pinSpacing, but that's doesn't work.

 

So I looked what have done @akapowl and that was exactly what I want.

 

The only problem, it's the css which goes with. I can't do that "easely" and "properly" in my project. 

 

With all of this, I took what you did (in js) and I only added few things.

 

I gave to my section a marginBottom who is equal to the height we have to scroll, and disabled the pinSpacing 

 

In some way, I think I do my "own" pinSpacing


See the Pen LYWGxRj by simon-gioffredi (@simon-gioffredi) on CodePen

 

 

Thank you so much for your help :D

 

  • Like 4
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...