Jump to content
Search Community

Scrolltrigger too jerky when I enter and when I leave

Skatedan test
Moderator Tag

Recommended Posts

hello, I'm doing some tests in making a pinned banner when I enter the image display with the scroll of two elements as I scroll using ScrollTrigger.
I have a problem, that is, when I go in and when I go out it seems to me that the effect is too "jerky" and not fluid?
could you kindly give me support?
thanks a lot.

here is my example with js and style:

 

JS:

const tl_cms = gsap.timeline({
  scrollTrigger : {
    trigger: ".start_fx_prods",
    start: "top 7%",
    end: "bottom 30%",
    markers: true,
    scrub: 1,
    pin: true
  }
  });
  num_element = jQuery('.start_fx_prods .menu_fx_lft .elemMe').length;

  tl_cms.duration(2);
  tl_cms.to(".start_fx_prods .menu_fx_lft .elemMe",{opacity: 1, stagger: num_element})
  tl_cms.to(".start_fx_prods .menu_fx_lft .elemMe",{opacity: (j) => 
                                            {
                                              return j < (num_element-1) ? 0 : 1;
                                            }, stagger: num_element}, num_element)

  tl_cms.to(".start_fx_prods .menu_fx_rgt .ele",{opacity: 1, stagger: num_element}, 0)
  tl_cms.to(".start_fx_prods .menu_fx_rgt .ele",{opacity:  (j) => 
                                            {
                                              return j < (num_element-1) ? 0 : 1;
                                            }, stagger: num_element}, num_element)

SCSS:

.menu_fx_lft{
    p{
        font-weight: bold;
        line-height: 65px;
        margin-bottom:45px ;
        font-size: 65px;
        margin-top: 0;
        position: absolute;
        opacity: 0;
        top: 50%;
        transform: translateY(-50%);
        .step{
            position: absolute;
            left: -80px;
            top: -10px;
            text-transform: uppercase;
            font-size: 18px;
            font-weight: lighter;
        }
        &#elemMe1{
            opacity: 1;
        }

    }
}
.menu_fx_rgt{
    min-height: 400px;
    p,div{
        font-weight: bold;
        line-height: 35px;
        font-size: 24px;
        margin:0 ;
        position: fixed;
        opacity: 0;
        top: 50%;
        transform: translateY(-50%);
        &.elemMe1{
            opacity: 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.
×
×
  • Create New...