reverse scrolling grid element with gsap

[paro 2 Likes (Newbie)]

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

[OSUblake 18,400 Likes (Superhero)]

Hi Paro,

 

Have you checked out ScrollTrigger? 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

[paro 2 Likes (Newbie)]

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.

[OSUblake 18,400 Likes (Superhero)]

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.

 

[paro 2 Likes (Newbie)]

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])});
})

 

[OSUblake 18,400 Likes (Superhero)]

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.

 

[paro 2 Likes (Newbie)]

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);

 

[Cassie 4,251 Likes (Superhero)]

That looks like a good start to me!

 

Here you go.

 

See the Pen NWyrBjR?editors=1111 by GreenSock (@GreenSock) on CodePen

[paro 2 Likes (Newbie)]

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.

[Cassie 4,251 Likes (Superhero)]

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