Jump to content
Search Community

Want the scroll slow with ScrollTrigger Plugin

Araf Hossain test
Moderator Tag

Recommended Posts

Hello everyone I need a simple solution. This is my website http://araf.dynamicflowdev.com. I want to the parallax run with the sidebar scroller. 

 

Now what's happening now: 

When I scroll down full section goes up. But I don't want this.

 

What I want: 

I want when user scroll, every section will go up as scroll. Not the full section. I don't want to scroll full section. I want something like this site https://nagama.digital/

On that website, scrolling is too smooth and works perfect. I want something like that. 

 

I want the smooth scroll.

Here is my js code: 

gsap.to(".custom_panel:not(:last-child)", {
  backgroundPosition: `20% ${+innerWidth / 60}px`,
  yPercent: -100,
  ease: "slow",
  stagger: .5,
  scrollTrigger: {
    // markers: true,
    trigger: "#content",
    start: "top top",
    end: "+=300%",
    scrub: 8,
    pin: true
  }
});
gsap.set(".custom_panel", {zIndex: (i, target, targets) => targets.length - i});

 

Here is my css code:

#content {
  width: 100vw;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
}
.custom_panel {
  position: absolute !important;
  will-change: transform;
  min-height: 100vh;
}

Here is my view: 

http://araf.dynamicflowdev.com

See the Pen Yzwpevj by arafnoob (@arafnoob) on CodePen

Link to comment
Share on other sites

Hey Araf and welcome to the GreenSock forums.

 

If I'm understanding you correctly, it looks like you just need to change the position of your sections so that they start half way down the viewport. Can you please make a minimal CodePen demo if you're wanting our help implementing this effect? You shouldn't include all of your content of the page, just some big rectangles would work.

 

Link to comment
Share on other sites

55 minutes ago, ZachSaucier said:

Hey Araf and welcome to the GreenSock forums.

 

If I'm understanding you correctly, it looks like you just need to change the position of your sections so that they start half way down the viewport. Can you please make a minimal CodePen demo if you're wanting our help implementing this effect? You shouldn't include all of your content of the page, just some big rectangles would work.

 

Hi,

I know how to do this. But I am using WordPress elementor where tons of css for singular design. 
i have done this with the demo. But When I am trying to implement in WordPress, lots of problems shown. For this reason I have shown this like this. 

Link to comment
Share on other sites

8 minutes ago, ZachSaucier said:

I think you should use a different approach. Something more like this: 

 

See the Pen

See the Pen ZEQBRde?editors=0010 by GreenSock (@GreenSock) on CodePen

by GreenSock (@GreenSock) on CodePen

 

I can't do this. Because my sections are bigger. And I used pin to stay the content as It is. Checkout this link https://nagama.digital/ they also used this plugin to do this. 

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...