Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Ali Manuel

Fade in-out sections

Recommended Posts

Hey guys , where is my mistake  here , I want to have fade in - out between sections without to scroll down, example
I don't ask for any 3d animation , I just want to know why the fade in - out not working.

See the Pen gOwVwMV by itsalimanuel (@itsalimanuel) on CodePen

Link to post
Share on other sites

when things don't work it's important to check the errors and warnings


your pen had numerous warnings 


gsap-latest-beta.min.js:10 Invalid property scrollTrigger set to Object Missing plugin? gsap.registerPlugin()


please add this line above your other code




This is necessary in cases where you are loading ScrollTrigger BEFORE gsap which is what it appears you are doing in your pen. Using registerPlugin is a best practice which is recommended to avoid these issues (as explained in the docs)


  • Like 3
Link to post
Share on other sites

 Hey @Carl , yeah , but I just forget to add it here(I have it in my JavaScript file) , now you can check the code , you will understand what I mean

Link to post
Share on other sites

sorry, that example you posted appears to be incredibly complex. I'm not at all prepared to figure out and explain how that is achieved. it appears the animation is not controlled with scrub:true. once a section is reached the animation plays on its own. Hopefully that helps. Good luck with the project!

  • Like 1
Link to post
Share on other sites

Okay, but I said before ( I'M NOT ASKING ABOUT 3D ANIMATION) , Just i want to understand why my code not working as fade-in fade-out

Link to post
Share on other sites
18 minutes ago, Ali Manuel said:

why my code not working as fade-in fade-out

It is working. You're scrubbing through it. If you scroll slow enough you can see that happening. If you scroll quickly then it will jump because that's what you're telling it to do. 


Maybe you'd like a numerical scrub like scrub: 0.5?


Or perhaps you'd like to fire set enter and exist animations (i.e. don't use scrub, just use toggleActions. Or just use the callbacks and fire new tweens each time).

  • Like 5
Link to post
Share on other sites


In addition to what the others said:


That page you linked to does use some sort of scrolljacking - something like fullpage.js does.

This is not what ScrollTrigger is built to do in the first place.


You can certainly achieve something like that with ScrollTrigger but you'd have to do most of the work (like handling eventlisteners and hijacking the all different possible scroll-events) yourself or choose to use a library like fullpage.js that does it for you.



  • Like 4
  • Thanks 1
Link to post
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.