Jump to content
Search Community

reverse scrolling grid element with gsap

paro test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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

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.
×
×
  • Create New...