Skatedan

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?

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

hi @Cassie, Thanks for the reply! Sorry if I didn't explain myself well, but I don't need to have slower animation fades during the effect but go into animation and animation output. The code I am working on is yours published days ago

Hi @nico fonseca & @Cassie, now i would like to enter and exit more smooth then now, it seems too jerky. At this link you can find a little video demostration. Thanks for your support. Skatedan.

ok, it seems great! there is only one that I would like to change, when the animation ends, is it possible to leave the last state of opacity visible?

Great, it looks just what I need, I try and update you, thank you very much.

I'm sorry if I haven't explained myself well, I would like the first element of the left menu to have opacity 1 by default (the others have opacity 0.5) and at the same time the first of the right menu has opacity 1 (the others with opacity 0 ), when I scroll the elements with opacity 1 of the left menu I will have opacity 0.5 and the next one with opacity 1, while for the right menu the one with opacity 1 changes to 0 and the next one is shown with opacity 1. it's a bit confusing, I hope I've explained myself sufficiently

aaah ok, i got it but from the example they don't seem synchronized

I understand, but I saw that such a thing should be handled in a synchronized manner using this method: tl.staggerTo(".elemMe1, #elemMe1", 1, {opacity:0}) tl.staggerTo(".elemMe2, #elemMe2", 1, {opacity:1}) it could help me? The only thing is that it doesn't allow me to enter an additional value for the second element

that's right, the scroll must change the opacity for both menu items

here there is an example for with my code: https://codepen.io/skatedan26/pen/bGRBEJm

Hi Cassie, thank you for your quick response, but honestly I don't know that this could be adeguate for my case. I am creating a double menu that by scrolling the viewport, I would like to change the opacity of the items contained within the first menu (left) from 0.5 to 1 (and inverse to scroll-up), and at the items on the right menu the opacity changes from 0 to 1 and 1 to 0 at the scroll-up

Hi, I would like to animate this elements simultaneously: tl.to(".elemMe1",{opacity:0,duration:1}).to(".elemMe2",{opacity:1,duration:1}) tl.to("#elemMe1",{opacity:0.5,duration:1}).to("#elemMe2",{opacity:1,duration:1}) How could I do? I also tried to use the staggerTo() method, but it didn't allow me to handle two different opacity values. Could anyone kindly support me? Thank you

Hi, I've did it no I need of 2 things: 1-line painted must be a line of point (like SVG d) 2-animate it on scroll. Tthanks for your tips

thanks for your time now i'm trying to test a pathDataToBezier() method, but seems that codepen doesn't know a library MorphSVGPluguns... look here: https://codepen.io/Skatedan/pen/gOYEqGZ?editors=0010