Shepa Posted November 23, 2021 Share Posted November 23, 2021 Hello there, This is my second try to ask for help and maybe someone will be able to help me. Is there a way to make some animation like this.I have 2 blocks. Left one is a fixed 100vh menu (pinned) ther right one is scrolling blocks. Is there a way to make show right block tabs with fade in fade out without scrolling right block. The right section should be fixed too as left one and just switch between contens by scroll with fade in our efffect. I have this one But I need to make something like this - I hope it clear. If not please ask any question you want. Thank you for your help. Regards, Alex See the Pen JjyzLwd?editors=1111 by Oleksandrshepa (@Oleksandrshepa) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted November 23, 2021 Share Posted November 23, 2021 Hello @Shepa, What you're going for sure is possible with the right logic - you will probably want to position your content on the right absolute. Then you could create one ScrollTrigger that just handles the pinning of the whole section for a specified amount of scroll and in a loop forEach of your tabs on the left create ScrollTriggers with 'scroll-durations' equal to the afore-mentioned specified amount of scroll for the pinning devided by the number of texts/headlines, offset in their starts by that amount times the index of each text/headline-element. Here is a demo I made some time ago. Maybe it can help you get yours working the way you want. See the Pen 85fd1433b311d0197397addc90617a77 by akapowl (@akapowl) on CodePen 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now