Jump to content
Search Community

Horizontal slider in pinned section

ArturSimonyan test
Moderator Tag

Recommended Posts

Hello masters of animations 
Try to adaptive this demo to my own slider but i can't find the right formula to recalculate slides position and trigger active slide when slide touch the right border of  div.slider. Slides count can be from 2 to n+.


This is the best thing I came up with. You can change in html slides number and see wrong work of this code

start: () =>
      "top top-=" +
      (slide.offsetLeft - window.innerWidth / slide_arr.length) *
      (max_width / (max_width - window.innerWidth)),
    end: () =>
      "+=" +
      (slide.offsetWidth + gsap.getProperty(slide, "marginRight")) *
      (max_width / (max_width - window.innerWidth)), 

See the Pen WNJgdmL by 1simonianartur1 (@1simonianartur1) on CodePen

Link to comment
Share on other sites

Sorry, I don't really understand your question. I suspect you might be asking something that would be solved by the containerAnimation feature (please read the ScrollTrigger docs for that). 

 

You'll definitely improve your chances of getting a good answer if you greatly simplify your demo and just use some colored <div> elements and ask something like "How can I adjust the x distance so that it stops when the right edge of the blue box touches the right edge of the viewport?" 

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