Jamesh Posted November 12, 2020 Share Posted November 12, 2020 I'm trying to make a div scroll horizontally all the way down a sister element. If you look at the code pen I've created, the box to left scrolls down 90% of it height in relation to the image on the right, this is as expected given that I have set a tween to go 90% down the y-axis. However, what I'd like to achieve is for the box on the left to scroll the whole height of the image and bottom out when the bottom of the box on the left reaches the bottom of the image on the right. Essentially I'd like the left box to scroll the whole length of the image on the right regardless of how tall the image gets and therefore be completely responsive. I've looked at using media queries but this simply isn't a dynamic way of approaching it as there are just too many variables. Any thoughts on how that might be achieved? Thanks in advance. See the Pen zYByjyV by jame5 (@jame5) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 12, 2020 Share Posted November 12, 2020 Hey Jamesh. Are you looking for something like this? See the Pen JjKwBma?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Jamesh Posted November 13, 2020 Author Share Posted November 13, 2020 Spot on. I thought it was possible to use a function but was struggling to get there. Thanks for your speedy help, much appreciated. Link to comment Share on other sites More sharing options...
Jamesh Posted November 13, 2020 Author Share Posted November 13, 2020 Spot on. I thought it was possible to use a function but was struggling to get there. Thanks for your speedy help, much appreciated. How would I go about making the scrollTrigger refresh on resize? Link to comment Share on other sites More sharing options...
Jamesh Posted November 13, 2020 Author Share Posted November 13, 2020 Found an answer to my own question for anyone looking. Add this to your ScrollTrigger. invalidateOnRefresh: true, Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now