Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ian Robinson

ScrollTrigger Horizontal slide with a single smaller panel

Go to solution Solved by akapowl,

Recommended Posts

Stripped a project back to basics and rebuilding an element at a time. Now I've spent a couple days trying to figure this one out but keep hitting roadblocks (or CodePen crashing on me for some reason). Attempting to add in a div of a smaller size than the others but only managed to partially get it to work – I have the gap, but the panel moves at a different rate. I found a snippit along the lines of 

x: () => `-${maxWidth - window.innerWidth}`,

but obviously it's only a small piece of the puzzle and feel I'd have to rebuild what I did to make it work so trying to figure out if it's the only option or if what I have can be edited relatively easily to accomodate.

See the Pen mdqyOxL by ilrobinson (@ilrobinson) on CodePen

Link to comment
Share on other sites

Hi Ian, 

 

I've read your posts several times, but I'm still unclear about what you're asking. Can you elaborate some more about what you are trying to do and what the pen you posted is not doing. Thanks!

Link to comment
Share on other sites

  • Solution
12 hours ago, Ian Robinson said:

Attempting to add in a div of a smaller size than the others but only managed to partially get it to work – I have the gap, but the panel moves at a different rate.

 

It is to be expected, that they move at a different rate, because the xPercent is related to the element's width. You're telling each element to move to the left for a specified amount of its own width so to say - which will be different with different width's of each element, so they will get out of sync.

 

See the Pen WNXbLMX by akapowl (@akapowl) on CodePen

 

 

 

The approach you are using only really works like that when the panels all are a window's width wide.

 

If you need to have sections with different widths, you will be better off tweening the x of either the individual sections like for example in this approach from the demo section...

 

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

 

 

...or a wrapping container element, something like in this example.

 

See the Pen dyvygmj by akapowl (@akapowl) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Thanks again akapowl (I believe you helped me with my previous issue as well)! But yes, you addressed my questions as I was pretty sure I could work it out if I rewrote the whole thing as you implied, but wanted to know if it was possible with just a couple adjustments/edits to the code I already had. 

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