Jump to content
Search Community

gsap, how scrub through layers of divs using mouse position

iamruletik test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

  • Solution



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) => {
      visualsTL.set(visual, {
        zIndex: 10
      }, i * 0.5);

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!

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