paro Posted May 10, 2022 Share Posted May 10, 2022 What i am trying to achieve is; See the Pen jOGGKRq by bramus (@bramus) on CodePen  Is it possible with only using GSAP? Maybe there is have demo but i couldn't find yet 🤔 My demo looks terrible but I would be very happy if someone could help. See the Pen MWQegGJ by tw_parodia (@tw_parodia) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted May 10, 2022 Share Posted May 10, 2022 Hi Paro,  Have you checked out ScrollTrigger? https://greensock.com/docs/v3/Plugins/ScrollTrigger  Link to comment Share on other sites More sharing options...
paro Posted May 10, 2022 Author Share Posted May 10, 2022 4 hours ago, OSUblake said: Hi Paro,  Have you checked out ScrollTrigger? https://greensock.com/docs/v3/Plugins/ScrollTrigger  I am not exactly sure how can i implement ScrollTrigger for this kind stuff. But anyway, a bit hacky way i am very close to solve it. Can you check updated version? i've problem with center column. i couldn't implement gsap to it. Link to comment Share on other sites More sharing options...
OSUblake Posted May 10, 2022 Share Posted May 10, 2022 8 hours ago, paro said: I am not exactly sure how can i implement ScrollTrigger for this kind stuff. Â Look at the code in the first demo you posted. Creating the same thing with ScrollTrigger and GSAP will be pretty much the same thing. Create a timeline that animates all the columns at the same, and then hook it up to ScrollTrigger. Â Give it shot with ScrollTrigger and a Timeline, and if you get stuck, we'll nudge you in the direction. Â 1 Link to comment Share on other sites More sharing options...
paro Posted May 11, 2022 Author Share Posted May 11, 2022 8 hours ago, OSUblake said: Create a timeline that animates all the columns at the same, and then hook it up to ScrollTrigger. i don't really understand how can i do that, can you give an example? I did try something but don't know how concept should be,  var offset = 0; let tl = gsap.timeline({duration:1, scrollTrigger: {trigger: "main"}}); window.addEventListener('scroll', function(e) { offset = window.pageYOffset; tl.to([rev_left,center,rev_right], {y: gsap.utils.wrap([offset,-(offset),offset])}); })  Link to comment Share on other sites More sharing options...
OSUblake Posted May 11, 2022 Share Posted May 11, 2022 Just ignore the scrolling for now.  Please just focus on the animation right now. So do not include scroll listeners, ScrollTrigger, gsap.utils.wrap or anything like that. Just make a timeline that animates the columns. As soon the demo starts, the animation should just run.  So add your animations to the timeline here. Just fill in the blanks...  let tl = gsap.timeline(); tl.to([rev_left], { // fill this in }, 0); tl.to(center, { // fill this in }, 0)  See the Pen BaYzdrx by GreenSock (@GreenSock) on CodePen  Once you do that, we can add in ScrollTrigger.  2 Link to comment Share on other sites More sharing options...
paro Posted May 11, 2022 Author Share Posted May 11, 2022 I've been working on it for hours but I couldn't come with a solution. I am really tired, maybe move without it is the easy option for me 😴  I updated css/html code and implemented scrollTrigger plugin,  gsap.registerPlugin(ScrollTrigger); const rev_left = document.querySelector(".column-reverse-left"); const rev_right = document.querySelector(".column-reverse-right"); const center = document.querySelector(".column-section"); let tl = gsap.timeline({scrollTrigger:{trigger:".column-section",start:"top top",end:"bottom bottom",scrub: true,markers: true}}); tl.to([rev_left], { duration: 1, yPercent: 200, }, 0); tl.to([rev_right], { duration: 1, yPercent: 200, }, 0);  Link to comment Share on other sites More sharing options...
Solution Cassie Posted May 11, 2022 Solution Share Posted May 11, 2022 That looks like a good start to me! Â Here you go. Â See the Pen NWyrBjR?editors=1111 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
paro Posted May 11, 2022 Author Share Posted May 11, 2022 Thank you so much @Cassie @OSUblake This solved my current issue but how about adding more smooth effect for scrolling? Because it does really fast. Maybe implementing "smooth-scrollbar" which i'll try that. Link to comment Share on other sites More sharing options...
Cassie Posted May 11, 2022 Share Posted May 11, 2022 You can move the end value further down to make the animation last over a longer duration, and increase the scrub value to make it more 'smooth' See the Pen zYRBmgP by GreenSock (@GreenSock) on CodePen 1 1 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