dmnk Posted June 19, 2020 Share Posted June 19, 2020 I want to be able to move element horizontally as I scroll. If I scroll down the element should go to the left, and if up it should go right. Initially the moving element should be aligned with "Our story". I managed to do it with jQuery (see pen), but is something like that possible with gsap? See the Pen LYGxOKv by dkadezabek (@dkadezabek) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 19, 2020 Share Posted June 19, 2020 Hey dmnk and welcome to the GreenSock forums. This is definitely possible with GSAP! In fact, we have a plugin just for scrolling called ScrollTrigger which will drastically outperform the code used in your demo above. It's super simple to use and has a bunch of features that I think you'll find handy. It's not clear exactly what timings you want, but here's the basic setup for how you could do it: See the Pen BajpYNx?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
dmnk Posted June 19, 2020 Author Share Posted June 19, 2020 @ZachSaucier, great! Thank you for your help. I will test the code. It seems to me like that is just what I need. Thank you! Link to comment Share on other sites More sharing options...
dmnk Posted June 22, 2020 Author Share Posted June 22, 2020 @ZachSaucier thank you for your help. I noticed just a little problem. While the code works on desktop it seems like it doesn't on mobile. Is it possible to activate ScrollTrigger for mobile? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 22, 2020 Share Posted June 22, 2020 What do you mean it doesn't work on mobile? Link to comment Share on other sites More sharing options...
dmnk Posted June 23, 2020 Author Share Posted June 23, 2020 @ZachSaucier your code is working fine on mobile. I implemented almost exact code on the website I am building. It was working perfectly on desktop, but on mobile the effect would be triggered too late. The bug occured first when I opened dev tools to test responsive (simulating iPhone 6/7/8). If I turned touch simulation off everything would work normally. On real device bug was present as well. For some reason scroller markers were disappearing on mobile, and sometimes markers for triggers as well. It was a CSS issue from my side. I added overflow: hidden to parent element and everything worked fine again. TBH I don't know why it is working with this change, but it works. Sorry for bothering you. Thank you very much. You really helped me. Link to comment Share on other sites More sharing options...
dhull Posted November 11, 2022 Share Posted November 11, 2022 @ZachSaucier I found this thread on a search for element animation and I wanted to see if ScrollTrigger will do what I need. A client has requested a site with little "roadways" arranged vertically on the site, and they want the little "car" shape on each roadway to move along the road as the page and roadways scroll vertically. I have attached a mockup of the roadway design they provided. Link to comment Share on other sites More sharing options...
Rodrigo Posted November 11, 2022 Share Posted November 11, 2022 Hi @dhull and welcome to the GreenSock forums! Unfortunately we don't have the time resources to provide custom solutions for our users. Please check this demos: See the Pen GRoXzYj by GreenSock (@GreenSock) on CodePen See the Pen dyMQYYz by michellebarker (@michellebarker) on CodePen Hopefully these are enough to get you started. If you have any GSAP related questions feel free to post a thread. Happy Tweening! Link to comment Share on other sites More sharing options...
Milan Parmar Posted June 8, 2023 Share Posted June 8, 2023 can u able to make rotating globe with scrolling like dennis Snellenberg.com hero section globe? Link to comment Share on other sites More sharing options...
Rodrigo Posted June 8, 2023 Share Posted June 8, 2023 Hi @Milan Parmar and welcome to the GreenSock forums! The link you provide is broken so there is nothing we can see there. I'd suggest you to check the ScrollTrigger Docs in order to understand and know how the plugin works: https://greensock.com/docs/v3/Plugins/ScrollTrigger Also take a look at this demos: https://greensock.com/st-demos/ And this codepen collections: https://codepen.io/collection/AEbkkJ https://codepen.io/collection/DkvGzg If you have any questions, remember to include a minimal demo that shows what you have and clearly illustrates the issue you're having. Hopefully this helps. Happy Tweening! 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