Jump to content
Search Community

ScrollTrigger sidebar with animation

ZenithLai test
Moderator Tag

Recommended Posts

Hi,

Would like to seek for you guys advice. Currently im working on the animation development for one of my website section. However, I would like the image to come out in "fade in" & "fade out" mode instead of scrolling up and down. 

 

Do you guys have any idea on how i should write on the code part ?

Appreciate if you can advice :)

 

Thanks !

See the Pen GRrMoxB by zenithlai (@zenithlai) on CodePen

Link to comment
Share on other sites

Welcome to the forums, @ZenithLai

 

There's a demo on the ScrollTrigger demos-page that shows one way of such a fade-in/fade-out effect

 

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

 

 

 

And these threads here follow bit of a different approach for that

 

 

 

 

 

Hope this helps. Give one of those approaches a try and we'll be glad to help if you run into any issues along the way.

 

 

  • Like 4
Link to comment
Share on other sites

It is works! Thank you.

 

I have one more question.

There is only little content for the section, thus I would like the content and image to appear once i scroll down from previous section instead of middle of the screen. And the following section appear right after the scrolling part end. 

 

Untitled-1.thumb.jpg.fe647eb0220291d43af9a02e9a324c0f.jpgThanks!

Link to comment
Share on other sites

 

I'm not sure I'm following, but if it is what I think you are referring to, that is what the start and end are there for.

 

You can tweek them (on both ScrollTriggers) to your liking. Does this here feel more like what you had in mind?

 

See the Pen 9b99361db3839f1169cdc0f278746ee5 by akapowl (@akapowl) on CodePen

 

 

 

On a sidenote:

Your demo actually is not working the way it was intended because throughout your JS you are adressing ".ChairmanSection .wrapper" when you don't have a ChairmanSection in your HTML. I fixed that.

  • Like 2
Link to comment
Share on other sites

Hi,

 

This is what my side view.

Screen-Shot-2021-04-09-at-11_19.46-AM.jpg.5672fde6e9f9b6e1f3353d9b43f0a55a.jpg

 

Because my website only little content for that section, thus can I reduce the spacing between top and bottom? And the following section appear right after the scrolling part end. 

Screen-Shot-2021-04-09-at-11_19.46-AM.jpg.7d0749f85841fcb297a252667a5d38a7.jpg

 

Thanks!

Link to comment
Share on other sites

5 hours ago, ZenithLai said:

Because my website only little content for that section, thus can I reduce the spacing between top and bottom? And the following section appear right after the scrolling part end. 

 

For that you would probably want to wrap all your content in a div and pin that wrap instead (when your section's center hits the center of the viewport). Did you mean it like this?

 

See the Pen 6bc8f80465f13ce58ed4496b9d53e0fd by akapowl (@akapowl) on CodePen

  • Like 2
Link to comment
Share on other sites

This is what I want! :)

 

But is they anyway to let the content auto calculate the content height? instead of set the height?

.philosophie,
.philosophie .wrapper {
  height: 50vh;
  width: 100%;
}
.philosophie .point {
  height: 50vh;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 4rem;
  outline: 1px solid red
}
Link to comment
Share on other sites

 

5 hours ago, ZenithLai said:

But is they anyway to let the content auto calculate the content height? instead of set the height?

 

Since your elements are of position absolute, you'd have to incorporate some logic in your JS to handle that.

 

E.g. set up a variable and in the forEach-loop over your elements check if the  current element's height is higher than that variable. If it is higher, set that variable to the current element's height - that way you'd make sure that you end up with the tallest element's height for that variable, which you could then use to set the height of everything that needs to have that height.

 

Add the same logic for resizes - e.g. on ScrollTrigger's revert event - and you should be good to go.

 

ScrollTrigger.addEventListener('revert', yourResizeFunction)

 

  • Like 1
Link to comment
Share on other sites

I have follow your suggestion.

 

But now I facing responsive issue, when I resize the image cant't fit in the white background section.

Screen-Shot-2021-04-14-at-10_42.46-AM.jpg.dddad8b0f3dc1e1370c0135f5021a80c.jpg

Have any idea on how i should write on responsive ?

Appreciate if you can advice.

 

*Sorry, I'm newbie for greensock, not familiar with this.

 

Thanks

Link to comment
Share on other sites

7 hours ago, ZenithLai said:

Have any idea on how i should write on responsive ?

 

Yes, I told you my idea in my response above.

 

 

 

7 hours ago, ZenithLai said:

*Sorry, I'm newbie for greensock, not familiar with this.

 

It's a general problem you are facing - on resize wanting a container to automatically adjust it's height based on children's heights that have position absolute. That has nothing to do with GSAP in the first place.

 

My suggestion above should work properly and I understand that if you are new to coding in general it might not be the easiest to wrap your head around at first. But we can't just code out every request that's being made here and you would also learn much more if you tried yourself.

 

Why don't you give it a shot yourself first, following my suggestion above? ...and I can see how I can help you from there.

 

 

On a sidenote:

It would be really awesome if you could use the fork button in codepen whenever you want to make changes to your initially posted pen and apply those changes to the fork instead of the original. This way the context of the thread will remain intact for others who stumble upon this thread.

 

 

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