nl en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en nl nl en en de en en en en en en en en en en en fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en nl en hu en pt en pl en hu en en en fr en en en fr en it en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
Thanks for all the comments and info. I will look into all your suggestions and come up with something.
Animating linear gradients with greensock
Zannen replied to Zannen's topic in GSAP
Did you also check the images i am trying to morph to? (I tested it on chrome) The hulk in the dropbox one doesn't look the same as the one on the page (the drop box images are what they should morph into) . So im thinking that i messed up what should Stagger to what. On the note that i am doing too many things i am aware of that. I am thinking of preprocess all the things that are not needed in the animation directly. For instance make lists of stop-color and offsets before i even start the animation. Also lowering the amount of gradient stop tags so it doesn't change the look of the gradient but just to lower the amount of points it has. I was looking at greensock performance test and was hoping i could achieve a smooth looking animation with it, since i didn't have luck with the other libraries i tried. Another idea is to separate the animation so i animate lets say half or third part of it first, to separate them in some sort of groups so they don't all animate at the same time. But im not sure how to pull of a cool looking animation out of it at the moment. I will try the first idea first, don't know if that will help, but that way i won't have any unnecessary operations after the click, so it might be smoother. Just moving the random function i have in the code and setting fixed value speeds it up.
Ok, well, i figured it out. In my own document the stop-color was actually defined as style="stop-color:#BLABLA" instead of stop-color="#BLABLA" which in turn resulted in NAN filling the lists i use to cycle through for staggerTo. But now i have another question. Is it possible i messed up the staggerTo while animating? Im asking this because when everything animates, including the gradients i do not get the exact same colors. It seems as if the colors are messed up a bit except from the starting image which is fine. EDIT: I'll try to put up the whole thing along with the links to the svg images to see what i expect after each animation tomorrow. If anyone will have time i would like to hear your thoughts on it.
Thanks for the input, i checked a couple of stuff and it really is the little part with the Stagger.to. Without it i animate through all the paths with the same gradient. I will look into it more closely, but thank you, i was stressed out and couldnt figure it out alone at the moment.
Animating linear gradients with greensock
Zannen replied to Zannen's topic in GSAP
Hey, its me again. I finally became a member after trying stuff out and making a script to equalize all the paths, linearGradients and stop tags across all of documents. And as i was setting up things i have run across some problems. For instance, after adding everything to a html document and modifying it so it works i can't get it to animate gradients. So i have the same code that i have on this link: http://codepen.io/anon/pen/gwpZyk?editors=1010 , but only on a larger scale. In my document my SVG-s consist of around 650 paths and gradients. The animation on all the paths work, but the gradients don't change. They are all in the same color(black), not even the start one. Do you have any thoughts on what might be wrong? I can't put it on codepen since codepen is really slow due to a lot of data.
Animating linear gradients with greensock
Zannen replied to Zannen's topic in GSAP
I managed to get it working! I talked to a friend of mine and i ditched the infinite loop idea in favour of calling a function on each click. I have a counter that represents the images and i have it reset after i go through all the images! Woohoo, now all i need is some prep to use the whole images and ill come back here with a link to see what you think. Thanks a bunch for all the information and inspiration! EDIT: In case you want to take a peak at the small version. http://codepen.io/anon/pen/gwpZyk?editors=1010
Animating linear gradients with greensock
Zannen replied to Zannen's topic in GSAP
Yeah, ummm..maybe i should have explained a bit more in detail. I managed to get the gradient and the animation working. I did testing if the gradient and the movement itself would animate and it does (but i tested it on 2 SVG images only). Right now it seems to me since i have a loop i can only see the animation between the first SVG image and the last one ( i reckon its probably because i don't have a pause between animations in the loop? ), and im trying to pause the loop somehow to see if it actually animates through all the SVG images. My question is, is there probably an easier way of doing it? Because i have a feeling i am complicating things a bit too much. Like i said in the beginning, i had an idea to make an infinite loop to make the animation continues. In that loop i wanted to extract and setup everything in variables and then use that in the animation. Since for instance i do not know how many   elements i have in each gradient, i made it dynamic so it counts them every time and animates them with the same   of the other point. Even though i don't have the same number of   tags in each   they are equal in the other SVG images. I also do not know how many SVG images i will have so i wanted to make that part dynamic as well. Example on the   tags. There is an equal number of   tags in SVG 1 image in linearGradient 5 and SVG 2 image in linearGradient 5, but no the same in SVG 1 image linearGradient 5 and SVG 1 image in linearGradient 6. Thats why in the last mini-loop i have before animating i am putting the stop information in a variable and using it like that to animate it. I used Stagger tween like Jonathan mentioned. I will look into AttriPlugin to see what it is all about. I just want to know if this is the right way to deal with this kind of idea. Im trying to get better at animating and programming so i want to do it right, but i have a feeling im just overcomplicating things. I was also thinking of making a mini program to check through all the SVG's and   tags before anything happens, count the maximums from all the SVG images then add some   tags and   tags that wouldnt change how the SVG images look except make the number of those tags equal across all the SVG images. What do you think about this idea too? I know you are all busy people, so i apologize in advance if im asking a bit much. But thank you for all the help so far i really appriciated! Wouldn't make it so far without your suggestions.
Animating linear gradients with greensock
Zannen replied to Zannen's topic in GSAP
Hello! Its me again! I haven't really been free to do any animating so im back to continue my work and ask you folks a couple of more questions. First of all is, is it wrong to make an infinite loop to make the animating process infinite? Second, is there an easier way to do it then i already have? And Third, what am i doing wrong? I was thinking of making an infinite loop through all my svg images, and wait for a click input or similar between the loops, but after the animation finishes. And then i would get a continues infinite animation that continues with a click. Here is the link with a summary and some comments and explanations. If anyone is free to check it out i would like to hear your comments. Also, it is set on a small example of 3 SVG images so far and each has 10 paths and gradients. I am going to use larger SVG images on my real work, about 650 paths and gradients at least in each image. Thanks in advance. Link:http://codepen.io/anon/pen/gwpZyk?editors=1010
Animating linear gradients with greensock
Zannen replied to Zannen's topic in GSAP
ok, thanks, ill keep that in mind
Animating linear gradients with greensock
Zannen replied to Zannen's topic in GSAP
Oh, hello again. I have another question regarding gradients. So in the first link waaay up above i managed to morph the gradients neatly. But, i was using the same amount of 'stop' tags. Is there a way to morph, or animate linear gradients similar to morphsvg, so it does it correctly even though there arent the same number of 'stop' tags in both groups i am morphing. Or do i have to manually add 'dummy' stop tags to either the destination or the starting linear gradient to make them the same number so they can map into each other accordingly?
Animating linear gradients with greensock
Zannen replied to Zannen's topic in GSAP
Thanks a lot! When im done with the whole animation im definitely posting it somewhere to show off!
Animating linear gradients with greensock
Zannen replied to Zannen's topic in GSAP
Not yet, but im working on it!. I was trying out my previous codepen examples on a larger scale and it worked with no problem, so im looking into chaining now, since for my project i will have more svg groups i want to tween between. I will come back and post a link if i get stuck when i manage to modify my code. Thanks!
Animating linear gradients with greensock
Zannen replied to Zannen's topic in GSAP
Hey, its me again. Not sure if i should open another thread, but im gonna ask here still anyway. I know that morphing can be chained. I saw in the examples. But can it be done in a manner that nothing morphs until you click the screen or a certain part of the screen, and if i have more morphs chained one after another, how would one go about chaingin them in a way that each one starts only when you click with a mouse? Are there any examples out there concerning this particular topic?
Animating linear gradients with greensock
Zannen replied to Zannen's topic in GSAP
Thanks a bunch! Wow...i can't believe i missed that... Ok, gonna try to work with that on a larger scale! Thanks again!
“It's so correct that GSAP's logo is a superhero. Every time I use GSAP it saves me heaps of time and frustration. Thank god for GSAP honestly.”
“I continue to be astounded by the sheer breadth of what @greensock can do. Every time I'm like "ooh, I wonder if I can do X", it turns out I can!”
“GSAP is just miles and miles ahead of any animation library out there. Great work!”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
“The depth of GSAP blows me away like all the time. It seems like I stumble on something new and amazing every time I peek at the docs.”
“Any time I've struggled to achieve a complex animation in CSS alone, I've never regretted using @greensock 's GSAP. After all these years, and impressive competitors, it's still Best In Class.”
“...obviously GSAP is incredible.”
“I will never say it enough but @greensock you are absolutely amazing and you have no idea how much time and brain cells I have spared thanks to you 🥰”
“+1 to GreenSock. It’s just one of the deepest and most reliable javascript libraries I’ve ever used”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.