Jump to content
GreenSock

paro

reverse scrolling grid element with gsap

Go to solution Solved by Cassie,

Recommended Posts

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

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

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.

 

  • Like 1
Link to comment
Share on other sites

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

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.

 

  • Like 2
Link to comment
Share on other sites

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

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

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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×