Jump to content
Search Community

I don't know if there a way to make something link this.

Shepa test
Moderator Tag

Recommended Posts

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 -
 MzyUM51.gif


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

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

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