Alle

Hi, sure I will prepare a demo and post it here. thanks

Hi, I would need help in making something with stagger. I have created a small animation of letters appearing using svg. I don't understand how I can intercept the end of each element called by the stagger. I would like when the letters are disappearing the square to stretch as the letters disappear. Example: H HO HOL HOLA -OLA (the - is the square) --LA ( -- more width) ---A ( --- more more width) ---- ( --- total width) 1. With this code I make the letters appear inside the svg. timline.to(".text-name path", 0.5,{ opacity:1, y:0, stagger:0.1, ease: "Expo.easeinOut"}); 2. Then I make them disappear by reducing the y. square_timline.to(".text-name path", 0.5,{ delay:1.3, y:-100, stagger:0.1, ease: "Expo.easeinOut"}); 3. Then I have a simple square. I've tried anticipating with "-=2" but it doesn't work well. square_timline.to(".square", 2,{ width: 500, ease: ""},"-=2"); I don't understand if I need to use an onUpdate or if there is an onComplete function on each element of the stagger. Maybe I am thinking of a wrong method and there is a simpler one that I don't see. I hope I have explained myself. Thanks in advance to all.

Hi and thanks for the super quick response. "tailbreezy and ZachSaucier" I explained myself rather badly actually, probably because I didn't really understand what I wanted to do either. What I wanted to know exactly was the loading of the page and not the length of the animation. No one tasked me with this job. I got obsessed with greensock and trying to figure out the best way to do things in the future. I did some experiments. The one provided by tailbreezy and the one provided by Ahsan. I compared both online and non-localhost preloads. Also I put the Network Fast 3G to slow everything down. I noticed that both preloads start after about 3500 / 5000 milliseconds. So I was wondering why they don't start right away? It's as if there is an initial GAP with both. I'm fine with that too but I'm doing it to understand and go deep into things. I was not aware of the ticker like many other things evidently. This library is great and also its documentation, but there are so many things to know so it's not that easy. You have already given me a lot of valuable information that will help me to study and test. Thank you very much for your support.

Hi, I would like to know an opinion from the experts. I have created 2 preloads. The first one using onUpdate from GreenSock. var obj = {prop: 1}; gsap.to(obj, { duration: 1, prop: 100, //onUpdate fires each time the tween updates; we'll explain callbacks later. onUpdate: function() { gsap.to(".bar", { width: obj.prop + "%" }); $(".percentage").html(parseInt(obj.prop) + "%"); console.log(parseInt(obj.prop)); //logs the value on each update. }, onComplete: function(){ startTimeline(); } }); I try to see inspect element and I get back the data : 15, 36, 67, 88, 94, 95, 96, 98, 98, 99, 99, 99, 100 The second one using JS PerformanceTiming. I discovered this thanks to Ahsan K. Rathore. https://codepen.io/ahsanrathore/post/accurate-page-progress-bar It seems to me that using this system the preload works much better. the data that return to me are 1,2,3,4,5, etc.. I probably didn't understand well how onUpdate works, so I was wondering if there is any way to get the same result using onUpdate, I would like to avoid to use the script of Ahsan K. Rathore because I would prefer to use gsap directly. Can you give me some indication of the error I am making or is the method wrong? Thank you all. Have a great Sunday.

I want to share my "first and simple animation" but I'm happy to see the first step. All this thanks to this Forum for showing me the way. Thanks again. (Richard1604, mikel, PointC, )

Yes, sir! Thank you so much for showing me the way. I'm really grateful, by all means I'm reading all the documentation to get a global idea. Thank you very much again Alessandro

Here I am again. (Richard and Mike) Thanks for the super quick response. I've been trying to do some experiments. The first morphology, but I still don't quite understand how it works and I can't get complete control of the object. I don't understand how to start it from the bottom, obviously it must have "total discontrol" 😂😂 The second one was in fact just making a mask, but even in this case I was not super sure of the idea and also I was not able (I still have too many gaps in 48 hours you can't learn, I guess 😂). Now with this example I will try to solve my first experiment. Thank you for your support. I will surely come back with some questions Have a nice day Alessandro

Hi, everybody. I bought this beautiful library 2 days ago, so I'm totally new, and after reading a bit of documentation and a good dose of "depression" 😂 I have a question. I also searched the Forum but I don't know exactly what to look for, so excuse me if I repeat something that already exists. I created a simple rectangle in illustrator. Now I try to animate it from the bottom to the top, keeping its structure. I don't understand if I have to use DrawSVGPlugin or MorphSVGPlugin or neither of these because I'm getting unnecessarily complicated. I've inserted a screenshot to show exactly what I'm trying to do. I tried to do it in this way but I really think it's wrong or is some piece missing? Original (Start) <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="83.7px" height="94.5px" viewBox="0 0 83.7 94.5" enable-background="new 0 0 83.7 94.5" xml:space="preserve"> <polyline id="A-left_1_" fill="#333333" points="0,0.3 3.3,0 25.5,0 24.3,0.3 0,0.3 "/> </svg> Animate (Finish) tl.to("#A-left_1_",1,{attr:{points:'23.3,0 45.5,0 24.3,94.5 0,94.5'}}); The result, as you can see in the gif, is that it starts from the top and goes down and also does not stretch as I expected. Can you give me some indication to follow "conceptually" or some link to the documentation to recreate something like this? I'm sure I'm going the wrong way. Thank you very much. Have a nice day.