Skatedan

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?

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

September 14, 2021

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

September 14, 2021

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.

September 6, 2021

2 hours ago, nico fonseca said:

@Skatedan something like this?

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?

September 6, 2021

1 hour ago, nico fonseca said:

@Skatedan something like this?

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

September 6, 2021

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

September 6, 2021

18 minutes ago, Cassie said:

Questa è la vecchia sintassi GreenSock: se guardi più da vicino l'esempio che ho messo insieme per te, vedrai che utilizza scaglionamenti con la sintassi GSAP3 aggiornata.

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

September 6, 2021

19 minutes ago, Cassie said:

Ti avvicineresti allo stesso modo: vedi come il parametro di posizione può essere utilizzato per impostare i tempi di inizio dell'animazione?

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

September 6, 2021

6 minutes ago, Cassie said:

Thanks! Are you looking for something like this?

Note - You had inline opacity settings and opacity settings in your CSS and JS - that's an easy way to end up with conflicts and confusion.

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

September 6, 2021

2 hours ago, Cassie said:

I don't think I'll be able to help any further without a minimal demo, could you pop one together so we can help?

Thanks!

here there is an example for with my code:

See the Pen bGRBEJm by skatedan26 (@skatedan26) on CodePen

September 6, 2021

2 minutes ago, Cassie said:

Hi Skatedan,

You're probably looking for the position parameter!

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

September 6, 2021

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

September 26, 2019

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

8 hours ago, PointC said:
You're trying to get path data from the whole SVG. You'll want to use your path ID of Path-3.
var motionPath = MorphSVGPlugin.pathDataToBezier("#Path-3", { align: "#plane" });
You'll also need to move that image inside the SVG or you'll get BBox errors. Use something like this:
 <image id="plane" xlink:href="https://cdn.pixabay.com/photo/2013/07/12/13/56/paper-plane-147602_960_720.png" x="0" y="0" width="150"/>

September 25, 2019

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:

See the Pen gOYEqGZ?editors=0010 by Skatedan (@Skatedan) on CodePen

September 25, 2019

mmh, very good, tomorrow i check it

but what is the reference of MorphSVGPlugin?

thnks

September 25, 2019

Just now, PointC said:

Sono confuso: l'aereo dovrebbe seguire il percorso punteggiato o il percorso delle coordinate di Bezier? Vuoi anche disegnare il tracciato tratteggiato mentre scorri? È giusto?

Sorry

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

September 25, 2019

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:

See the Pen eYOXbMq by Skatedan (@Skatedan) on CodePen

September 25, 2019

7 minutes ago, ZachSaucier said:

Just replace the src of the img with the URL to the circle image that you want.

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>

September 25, 2019

ok, this is my pen

See the Pen eYOXbMq by Skatedan (@Skatedan) on CodePen

September 25, 2019

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

September 25, 2019

2 minutes ago, ZachSaucier said:

Great, you can do it!

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

September 25, 2019

2 minutes ago, ZachSaucier said:

What's going wrong?

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

September 25, 2019

1 hour ago, ZachSaucier said:

Hey Dan and welcome to the GreenSock forums.

You should break this down into two steps:

"Painting" the circle.

Making the circle "paint" on scroll.

For 1. you should look into GSAP's DrawSVG

2. Depends on exactly how you want it to reveal on scroll. Maybe this thread can help:

Overall, if you provide a demo of your work after looking at these resources we will be able to better help you.

Happy tweening

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?

September 25, 2019

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.

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Skatedan