dc65k Posted December 7, 2020 Share Posted December 7, 2020 Hello everyone. I have example by parallax effect on scrolling. https://pochta.tech/ Horizontal scroll parallax. I try repeating this effect used gsap ScrollTrigger. My example with problem: Tell me please, what the wrong in my code? See the Pen oNzxEpK by dc65k (@dc65k) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted December 7, 2020 Share Posted December 7, 2020 Hey @dc65k - welcome to the forums. Your setup is a bit different, so it appears to be working differently. Setting the section containing your slider to 100vh, centering the content within that section, and setting the start of your ScrollTrigger to 'center center', already gives you the effect like on that page you linked to. See the Pen 8cb2ba6a831a1a380ac4a7069c456a3b by akapowl (@akapowl) on CodePen If you want the slider items to be explicitly those 200px in height, you'd get quite a bit of whitespace though. For this scenario, probably it would be easieast to simply just pin the .container instead of the .slider. See the Pen 5383e85f6d81e4a8a63428721baf62dd by akapowl (@akapowl) on CodePen I noticed, that in the later demo, the pin would be jumping though, similar to what is described in this thread But adding a padding of 1px to your .container (as @GreenSock suggested in that thread) gets rid of the jumping. Hope this helps. Cheers. 6 Link to comment Share on other sites More sharing options...
dc65k Posted December 7, 2020 Author Share Posted December 7, 2020 Thank you very much. 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