Skatedan Posted September 27, 2021 Share Posted September 27, 2021 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 More sharing options...
Cassie Posted September 27, 2021 Share Posted September 27, 2021 Hey there! We can usually help more effectively if you provide a minimal demo, codepen is great for this. If I were you I'd move the end trigger further down the page in order for the animation to take more time and feel more natural 1 Link to comment Share on other sites More sharing options...
Skatedan Posted September 27, 2021 Author Share Posted September 27, 2021 hi @Cassie, I don't think it's a trigger problem, because any position in which I put the end animation trigger the animation is always the same, I think there is a need to add a fade-in / out, it is possible to add them in input and in exit? Link to comment Share on other sites More sharing options...
Cassie Posted September 27, 2021 Share Posted September 27, 2021 You can add any animations you'd like to the timeline. There are also onEnter and onLeave callbacks. If you'd like more assistance on this could you possibly create a minimal demo? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now