Scrub animation on list and change background when list item is hovered or is in center of screen

[Ahnaf Ahmed]

I am trying to recreate the list of works section from the site: https://hanzo.es/

I found a something similar in the forums and have mentioned the codepen, but I want the list to have a smooth scrub animation as I scroll and need to be able to scroll normally after the end of the section as I will have normal content below it.

I have attached a screenshot of the section I am trying to recreate from the reference site.

See the Pen poeBgJO by mikeK (@mikeK) on CodePen

[mvaneijgen]

Hi @Ahnaf Ahmed second post in two years! Can you please keep the post to a minimum, it is a bit much 🤣

 

Why not create one timeline with one ScrollTrigger? Seems much easier to manage in my opinion and next items can never start before the others have moved. I've moved some of your HTML around and removed the fixed properties from your CSS, so that ScrollTrigger can handle all the pinning for you and thus release them when  you want it to.

 

See the Pen xxBMYKm?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

You of course want to change something based on the text that is coming in. That you can do by using some clever timing and adding some extra tweens to your timeline. Check it out here I animate the clip-path of the .polygon element each taking 1 second and because there are 4 items and the duration of the last tween is 4 seconds it will exactly line up with the scroll tween that start at second 0 using the position parameter. Hope it helps and happy tweening! 

 

See the Pen Jjzxpjx?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Ahnaf Ahmed]

59 minutes ago, mvaneijgen said:

Hi @Ahnaf Ahmed second post in two years! Can you please keep the post to a minimum, it is a bit much 🤣

 

Why not create one timeline with one ScrollTrigger? Seems much easier to manage in my opinion and next items can never start before the others have moved. I've moved some of your HTML around and removed the fixed properties from your CSS, so that ScrollTrigger can handle all the pinning for you and thus release them when  you want it to.

 

 

 

 

You of course want to change something based on the text that is coming in. That you can do by using some clever timing and adding some extra tweens to your timeline. Check it out here I animate the clip-path of the .polygon element each taking 1 second and because there are 4 items and the duration of the last tween is 4 seconds it will exactly line up with the scroll tween that start at second 0 using the position parameter. Hope it helps and happy tweening! 

 

 

 

@mvaneijgenThis is what I have been trying to create. Thanks for the big help!