Jump to content
Search Community

FadeIn before pinning FadeOut after pinning

cephalee2tension test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hello,

 

I have a series of image that get pinned on after another.

I would like to make the image appear before it's pinned and disappear after it's unpinned.

 

It seems that the image is pinned during the whole duration of the timeline, so if I add my fading animations in the timeline they will take place while the image is still pinned.

So I'm looking for a way to animate my image just before and just after it's pinned.

 

Link to my minimal demo :

 

Thanks

See the Pen VwzoeML by nicolas-t (@nicolas-t) on CodePen

Link to comment
Share on other sites

  • Solution

Hello there @cephalee2tension - welcome to the forums.

 

Scrollbased animations like what you have in mind are heavily dependent on correct setup, so first and foremost you should make sure to set things up, so it will be possible for ScrollTrigger to work its magic in the first place. Without any JS, your pen looks like this...

 

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

 

 

...which is bound to 'break' things or not let them work like you might think, as there is no real space to scroll through in the first place (so there is nothing ScrollTrigger can react to correctly). For something basic like you have there with the pinning, things work just fine like that because of ST's 'magic' of applying the pin-spacing, but if you want to go beyond that, you will have to set things up differenty, I'm afraid.

 

A setup like this should be a better basis.

 

See the Pen 7090389ab1670dfa2880c57e1bd7c7d7 by akapowl (@akapowl) on CodePen

 

 

 

For the fading in and out of images before and after the pinning (which btw you wouldn't need to set a tl up for - if all you need it to do is pin things, you can use ScrollTrigger.create() ) you could create seperate ScrollTriggers.

 

The one before the pinning would be pretty straight forward - the one after the pinning can be a bit tricky though because of the pinning, so I would probably pin the images inside the wrapper instead of the wrapper itself (with pin-spacing set to false except for the one on the last wrapper), so you can still use the wrapper as a trigger later on (as it will continue scrolling whereas it wouldn't if you were to pin it).

 

Now you could set the start of the fading-out ScrollTrigger according to the scroll-duration of the pinning ScrollTrigger and you will end up on something like this, which works quite fine with both, scrub and time-based tweens (start and end will probably have to be adjusted a bit for time-based tweens though, depending on how exactly things are supposed to happen).

 

I hope it will help a bit.

 

See the Pen 15fd312b87db7b9e35d231c291211949 by akapowl (@akapowl) on CodePen

 

 

 

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