Wmin Posted August 9, 2023 Share Posted August 9, 2023 Hello, I'm building a scrolling animated site and got stuck somewhere, had to post on the forum as a last resort. I have a site like the image below and when I scroll from the first screen to the second screen, I want the portfolio to scroll from top to bottom. I went through many examples but couldn't do what I wanted. Thank you for your help in advance. Link to comment Share on other sites More sharing options...
GSAP Helper Posted August 9, 2023 Share Posted August 9, 2023 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
Wmin Posted August 9, 2023 Author Share Posted August 9, 2023 Hi again, I solved that problem but now i want to make "Fake-Vertical Scroll Section" title sticky but not working. can you help me? Link to comment Share on other sites More sharing options...
Rodrigo Posted August 9, 2023 Share Posted August 9, 2023 Hi, Unfortunately Locomotive is not a GSAP tool and we don't really have the time resources to give support for it. On top of that my knowledge of locomotive is very limited so I don't know exactly how your example is working and how to achieve what you're asking for. Maybe these examples could provide some inspiration: See the Pen GREjqrp by raj-shukla (@raj-shukla) on CodePen See the Pen wvJroYy by akapowl (@akapowl) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Solution akapowl Posted August 10, 2023 Solution Share Posted August 10, 2023 5 hours ago, Wmin said: I solved that problem but now i want to make "Fake-Vertical Scroll Section" title sticky but not working. can you help me? To be correct, that is actually a fork of a demo of mine; this one right here. See the Pen Vwppzqb by akapowl (@akapowl) on CodePen Just like in fake-horizontal-scrolling scenarios, you won't be able to just pin anything because you are not actually scrolling this part of the page; and I'm afraid I don't have the time to dig into your alternative approach. What you can do instead though, is set up another ScrollTrigger that scrubs a y-tween on the heading - e.g. use the same values for the tween and ScrollTrigger's start & end, as the fake-horizontal-scrolling part uses, to make it pin/wander over that exact distance with the fake-horizontal scroll. If you want it to behave different, that is going to become quite a bit more complex and it will be up to you to properly calculate the values that you'll need for it to behave like you intend. This should help at least give you an idea for how to approach it though. Good luck and happy scrolling. See the Pen JjeqZev by akapowl (@akapowl) on CodePen 2 1 Link to comment Share on other sites More sharing options...
Wmin Posted August 10, 2023 Author Share Posted August 10, 2023 I definitely solved it thanks to your example, sorry for not stating that. The example you gave below is exactly what I was looking for, thank you very much. 12 hours ago, Wmin said: Hi again, I solved that problem but now i want to make "Fake-Vertical Scroll Section" title sticky but not working. can you help me? 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