gsap, how scrub through layers of divs using mouse position

[iamruletik]

Is there a way to replicate this cool animation from this website using Gsap? 
https://decimalstudios.com/

I kind of did it, but wonder is there a better way to do it?
 

See the Pen XWyZKoX by iamruletik (@iamruletik) on CodePen

[Rodrigo]

Hi,

 

Great work. Just a few thoughts:

• When the pointer gets close to the left the last image becomes visible over the first, better set the first z-index to 10 in your CSS:

  section:first-child {
    z-index: 10;
  }

• Since the swap is immediate, I don't see the use of using to() instances, better use set() instances and a final one after the loop in order to give some gap for the final image to become visible:

  sliderVisuals.forEach((visual, i) => {
    console.log(sliderVisuals);
    visualsTL.set(visual, {
      zIndex: 10
    }, i * 0.5);
  });
  visualsTL.to({},{});

Here is a fork of your codepen with a better and cleaner approach IMHO:

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

 

Hopefully this helps.

Happy Tweening!

[Rodrigo]

Also you can use Stepped Ease for this as well:

https://greensock.com/docs/v3/Eases

 

Just select steps on the right side of the Ease Visualizer Tool.

 

Happy Tweening!

[iamruletik]

@Rodrigo wow, thanks a lot ) It's really more cleaner and defined solution )

[mvaneijgen]

I was much more interested in the hover effect of the layout lower on the page. I'm just going to leave this here 😅

 

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

[iamruletik]

@mvaneijgen it's like bonus gift for birthday)