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

mmh, very good, tomorrow i check it but what is the reference of MorphSVGPlugin? thnks

Sorry however, i would like that plane draw a path svg while scrolling , it's clear?

sorry but this is a little project of test, I don't check a particular however i would like that place follow a points and point show up on scroll: https://codepen.io/Skatedan/pen/eYOXbMq

i've a this SVG, and i want that plane follow this route <svg width="1383px" height="3937px" viewBox="0 0 1383 3937" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M-16,-15.3568553 C0,6 48,81 160,102 C272,123 443.5,61 554,61 C664.5,61 745,125.020066 720,276.510033 C703.333333,377.503344 644.534456,458 543.603369,518 L726,870 C747.821022,969.678976 621.276277,1005.93012 346.365766,978.753432 C-66,937.988399 -13.8552959,1444.80324 318.226681,1405.63884 C650.308659,1366.47443 674,1160.34543 710.5,1055.67271 C747,951 925.765037,928.5 955.382518,1070 C971.54469,1147.21613 995.389199,1285.05141 1096.1946,1288.89869 C1197,1292.74598 1182.66823,1197.496 1210.53032,1190 C1271.85962,1173.5 1390.5239,1145.33129 1378,1314.47278 C1365.4761,1483.61428 1092,1370.11664 855,1431 C618,1491.88336 694.651701,1766.26129 915.21843,2068.76129 C1062.26292,2270.42795 1012.11983,2337.50752 764.789182,2270 C766.63272,2272.35703 734.462757,2261.16569 668.279293,2236.42597 C569.004096,2199.3164 379.118678,2235.18532 379.118678,2339 C379.118678,2442.81468 361.219403,2470.69845 279.219403,2509.0284 C197.219403,2547.35834 157.830942,2779.15266 470,2735 C782.169058,2690.84734 633.049252,2547 829.045221,2541 C1025.04119,2535 1097.97335,2629.17616 1125,2662 C1152.02665,2694.82384 1070.47139,2841 955.382518,2894 C840.293647,2947 334,3336.76087 330,3395.93088 C326,3455.10088 293.633426,3545.5 364.5,3639.5 C435.366574,3733.5 607.016682,3645 644.237924,3614 C681.459167,3583 984.827697,3340.58395 1073.93748,3553.5 C1163.04727,3766.41605 620.988018,3868.48051 598.994009,3951.07353" id="path"></path> </svg>

ok, this is my pen https://codepen.io/Skatedan/pen/eYOXbMq

Ok, I have generated a codepen, now how i can post here?

can you show me a for a little steps how can i do it please? ?

nothing, a project it's clear, now i want to to add light trail whit a small circle, but i don't understand how can i drow a small point that follow a route of plane

Hi Zac, thanks for your kindly answer, i'm following this tutorial , and i would like to draw a point before a plane over the scroll, it's clear?

Ih Guys, I'm Daniel and I'm new here, I've a svg path (transformed in x,y points) for a line of points. i would like to know if there is a way to draw a circle during the scroll of page. in other words i would like to paint a small circle over the scroll. Anyone can you help me? Thanks. Good Evening. Daniel.