KarthickVeera Posted December 5, 2019 Share Posted December 5, 2019 I need do like multi scroll using Gsap. I have to do like this https://dpotferstudio.com/ See the Pen raQYVw by romswellparian (@romswellparian) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 5, 2019 Share Posted December 5, 2019 Hey Karthick and welcome. Thanks for being a Club GreenSock member! This is quite doable with GSAP. The simplest basic setup: Setup your page to have two columns taking up half the width. Have the right side go in reverse order. Animate from section to section based on the scroll position, animating the left side up and the right side down. If you get stuck let us know and we'll help however we can! Link to comment Share on other sites More sharing options...
KarthickVeera Posted December 5, 2019 Author Share Posted December 5, 2019 I tried many ways using scroll magic. I need to do while scrolling left is going to be a bottom right is going to be up. with scroll to position and smooth scroll. Now I created html. Kindly help me. See the Pen jOEPvRm by KarthickVeeramani (@KarthickVeeramani) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 5, 2019 Share Posted December 5, 2019 2 minutes ago, KarthickVeera said: I tried many ways using scroll magic. Scroll Magic isn't a GreenSock product and we don't really support it here. 5 minutes ago, KarthickVeera said: Now I created html You didn't follow the instructions I gave above... But since we like to bend over backwards to serve our clients here at GreenSock, here's a basic way you could set it up and do it: See the Pen OJPVBax?editors=0010 by GreenSock (@GreenSock) on CodePen Happy tweening 1 Link to comment Share on other sites More sharing options...
Hesham M Posted September 16, 2023 Share Posted September 16, 2023 this example was quite helpful but if i put it some where else between the other sections the right section it translated on large number iam quite new in using gsap Link to comment Share on other sites More sharing options...
Hesham M Posted September 16, 2023 Share Posted September 16, 2023 See the Pen bGEeeBr by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted September 17, 2023 Share Posted September 17, 2023 Hi @Hesham M and welcome to the GreenSock forums! I'm on my phone now so there's not a lot I can do, but a quick glance at your code most likely the issue is that you are creating a ScrollTrigger instance for each column. No need for that, just create one instance for both and pin the parents element. Here is a simple demo showing that: See the Pen KKeJaqW by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Hesham M Posted September 18, 2023 Share Posted September 18, 2023 hi thanks for this but there causing issue when it scroll transition takes place bt i think at 10% of it just stops looks odd Link to comment Share on other sites More sharing options...
Rodrigo Posted September 18, 2023 Share Posted September 18, 2023 Hi, I'm not completely sure I follow what you mean with this: 3 hours ago, Hesham M said: there causing issue when it scroll transition takes place bt i think at 10% of it just stops looks odd Maybe that extra white space below the red element? That is because you have set your elements to be 50vw and not 50%. The 50vw means that the space used by the scrollbar is actually taken into account which creates an horizontal scroll. The possible solutions for that are either use percentage instead of vw or give the container element an overflow hidden on both axis (X and Y): .sections-container { position: relative; height: 300vh; overflow: hidden; } Here is a fork of your codepen with that change: See the Pen YzdEzZm by GreenSock (@GreenSock) on CodePen If you keep having issues, please be as specific as possible in order to really know what you're trying to achieve and the issue you're experiencing. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Hesham M Posted September 18, 2023 Share Posted September 18, 2023 now this example has smooth scrolling with animation but previous example lacks, not like smooth transitions of section that's what i was asking Link to comment Share on other sites More sharing options...
Rodrigo Posted September 19, 2023 Share Posted September 19, 2023 Hi, I'm still not sure about what exactly you want to do, but I gather that you want to remove the scroll bar completely. Here is an example that uses the Observer Plugin: https://greensock.com/docs/v3/Plugins/Observer See the Pen jOXaaoY by GreenSock (@GreenSock) on CodePen 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