Jump to content
Search Community

Search the Community

Showing results for tags 'random'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

  • Learning Center
  • Blog

Categories

  • Products
  • Plugins

Categories

  • Examples
  • Showcase

Categories

  • FAQ

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 25 results

  1. Hi All, I'm trying to create a continuously changing polygon animation that uses randomly generated values for the points. I've got it working for the 1st set of generated numbers, but it doesn't use the subsequent set of values. It keeps repeating between the initial shape points and the 1st set of generated points. Any ideas on how to "refresh" the points so it can constantly change the shape of the polygon Cheers
  2. Hiya, I'm trying to find out what the best approach to this is. I'd like to create a lander that has a bunch of svgs that spawn in random locations, but don't overlap, on page load. Once they're loaded in, they'll passively bob up and down and rotate a bit. Is this possible with GSAP, or should I keep looking? I potentially like the idea of using the 2d physics plugin to make them bump off each other, but that's deff phase two. I've attached a screenshot of the mockups to give you a better idea of what I'm after. The object in the middle has a blue roughly-cut background baked into the image and would be placed on top of everything, so no need to add collision avoidance to that part. Ya'll are great! Thanks
  3. Hi Guys, I'm trying to create some glitching text that is different on every repeat using an SVG filter and some basic transforms. I'm happy enough with how it looks but can't get the randomised skewX and Delay variables to refresh on repeat despite setting repeatRefresh to true on the timeline and using the gsap random functions or a custom function. I feel like I've set it up correctly but I must be doing something stupid and I can't spot it. Any help would be greatly appreciated!
  4. Hi, I am new to Greensock and I really love it so far! Today I was struggling with setting a random duration on a tween or timeline object. I created a helper function that returned a random value for the duration. In the tween properties I called the function on the duration property. However, the random value only was set once and the function was never called afterwards, although the animation was infinite by setting repeat: -1. I found the property repeatRefresh, but the docs say: What am I doing wrong and how can I set dynamic values for duration or delay for each new repetition of my animation? Thanks for some hints in advance!
  5. I can't get the random to work. Any help would be so awesome. Thank You
  6. Hi there! I'm trying to repeat a timeline with different random numbers values on each repetition. (On the circles staggering) It seems it is working but the first tweens are not repeating. .to(square, {x: -200, backgroundColor: 'blue', borderRadius: '10px', skewX: '30deg', ease: 'bounce'}) If I change the "to" for a "from" it works. .from(square, {x: -200, backgroundColor: 'blue', borderRadius: '10px', skewX: '30deg', ease: 'bounce'}) Is this the best way to do it? Thanks in advance,
  7. Alyz

    Random animations

    Hi, I'm putting together an animation which moves a number of element around the screen at in a seemingly random pattern, I am able to achieve one random movement but when I apply a repeat:-1 the positions all reset. I'm thinking I need some sort of looping function to achieve this but my javascript is not as strong as it could be and and i'm struggling to work it out? I'm also aware that the way i'm animating the items might mean that they eventually end up off screen, is there anything more intelligent I can do to stop this from happening? Any help gratefully received.
  8. Hey any tips or suggest to perform a kind of reel infinite random motions? I find my approach too redundant. Example on text matrix? I get a random behavior, but alway same from looping ! this is currently the code startMotion(){ const List = this.child.Master.children; //words //!motions words if('option motions words'){ gsap.staggerFromTo(List, 0.5, {alpha:0},{alpha:1, ease: Power1.easeIn}, 0.4); gsap.staggerTo(List, 4, { x:()=>`+=${Math.randomFrom(4,-8)}`, y:()=>`+=${Math.randomFrom(7,-10)}`, ease: Power1.easeInOut, repeat:-1, yoyo:true}, 0.2); }; }; What i would like it a way to compute a random range from a radius ? but alway random after loop cycle. Do gsap have a native easy feature to perform this? suggest welcome
  9. hi guys , what the good way to do this in a timeline ? .from([item1,item2,item3], 1, {rotation:Math.randomFrom(1,4), ease: Power4.easeOut },'#item') My arrays items are dynamic and never same, and i want to dispatch the random value in properties for each items in the array ? what the best way to proceed and for keep a good readable structure in the timeline. I can maybe do something like this , but it kind weird ! and ugly code. tl.call(() => { items.forEach(it => {tl.from(it, 0.2, {rotation:Math.randomFrom(1,4), ease: Power4.easeOut },'#item') }) },null,null,'#item') If you have some suggest, i take it
  10. Hi, I have to create a 300x250 banner that will have circles moving slowly around the banner, changing size and position all randomly. Also they will need to be at random opacities. See the image attached. The opacity doesn't necessarily need to change. They all need to stay within 100px from the top and 20px from the bottom. Can be svg shapes or png images like the attached. I don't know where best to even start! Can anyone help? Thanks for any help.
  11. Hi, I'm wondering if it would be possible to randomise number AND pass it to the animation on update: $('.dot').each(function(e){ var floatingThis = new TimelineMax({repeat:-1, yoyo: true, onUpdate: update}); var timing = Math.floor(Math.random() * 10) + 8, posY = Math.floor(Math.random() * 90) + 0, posX = Math.floor(Math.random() * 100) + 0; function update(){ timing = Math.floor(Math.random() * 10) + 1, posY = Math.floor(Math.random() * 90) + -90, posX = Math.floor(Math.random() * 6) + 1; // console.log(timing, posY, posX); // floatingThis .to($(this), 1, {x: posX + 'vw', y: posY + 'vh'}); // floatingThis.play(); } console.log(timing, posY, posX); floatingThis .to($(this), 1, {x: posX + 'vw', y: posY + 'vh', ease: Power0.easeNone}); }); I'm pretty sure it is , I think I saw something on the web and probably an answer here on the forum, but I can't find it anymore. I'd like my dots to float randomly (at least on the y axis, on the x axis as well bu not that far) on the page, not sure if it can be done using onUpdate tho. Another question/issue, vh and vw are not working at all, I'm randomising number between 90 and 0, so let say that it's 80, my dot should go out of the screen, but it's not the case, all my dots are staying almost on the same line without going further. So either I can't use vh and vh and than the animation shouldn't work at all or it should respect vh and vw value (that's my understanding). Thank you
  12. I'm grateful for the incredible help I've received on this forum. I've seen other posts regarding randomization, but they're a bit above my head & seem to address randomization of attrs rather than my objective. Anyway, apologies if this has been mentioned. I have a great many divs. The example I'm posting below contains 9. I simply wish to render an effect of random fade-ins & fade outs of each DOM element, infinitely, (with different animation durations and delays between them). (Much in the same way Christmas lights slowly go on and off again seemingly out of sync...). I would hope to randomize animation duration so that they overlap. It's a simple animation to write procedurally, I suppose. I would like, however, to learn how to do it properly in GSAP. (I've seen on the forum, occasional suggestion to use jquery's each() in different contexts. Unfortunately, jQuery isn't available to me). Again, Opacity is the only attribute that I wish to animate: from 0 to 1 and then back to 0--repeatedly on each element... infinitely. Duration of this animation is what I would like to randomize. Additionally, (but of lower priority) I would like to randomize the order in which each item animates. I am not interested and a stepwise animation of elements down an Array & then back up again. {yoyo: true} was useful, on the entire array of staggerFromTo() elements... but I quickly discovered that isn't relevant to my problem. I wish, simply, to randomize the sequence (so, I suppose, the index) of each DOM element to be animated. Secondarily, I would like to randomize animation duration. Q.: Does cycle() perhaps do this? --I've only seen it address values for attrs... One useful post points to this: HOWEVER, these elements are animating simultaneously with equal duration values. I'm very grateful, again, for any assistance. What I learn here is giving me insight into a great deal of what I've tried to learn for years. --- P.S. (I'm doing something in react & cannot use jQuery.) targeting within react.js is another nut I'll crack once I solve this problem (with your kind help).
  13. Hi guys, Setting and expecting limits unfortunately C disappears once in a while. My pen: http://codepen.io/mikeK/pen/QKwrGG How should I interpret the limit scale:randomNumber(0.5, 1) ? Kind regards Manfred
  14. dada78

    Twinkling Stars

    Hi guys, I am trying to do the following in plain JS and am failing miserably: 0_ Dynamically create x amount of stars of an existing dom element 1_ Fill an area with randomly positioned stars (dots at this point) 2_ Then animate the alpha in and out at random times Issue: The console log is not printing the generated random numbers for the index Thanks for your help!
  15. Hi, The gulls are flying* ... Only gulls - mmhhh. Here in a 'short story'. Sometimes I want to change** the world - at least a little bit. But it will take some time. Be patient. Kind regards Mikel * A fork of Blake´s code (his pen). Morphing by 'cycle' and handling some risks. ** The will-change property provides a way to hint people about the kind of changes to be expected on an element, so that we all can setup appropriate optimizations ahead of time before the element is actually changed. By the way: The claim originates from a poster on a pub door in Hamburg during the last G20 summit. Everything else is f(r)iktion.
  16. Guys i really need help on this. Basically as you can see from the linked codepen i have a lowpoly lion in SVG, all made out of single triangles. At the moment i made this animation of all the pieces falling from a single spot and forming the image, but what i need is different. I need all the pieces to come randomly from all the directions, top, lef, right, bottom, all going to the center and create the lion. There is a simple way to make this with TweenMax? I dont really know how to make this and i'm not really good with Javascript. Thanks in advance!
  17. What is the easiest way to always randomly shuffle all items in an array and then stagger them. var items = [a, b, c, d, e]; <-- Random order everytime TweenMax.staggerTo(items, 1, {opacity: 1}); 1) I can first randomize my array by following this link http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array Then only do my stagger effect. 2) Or can I use the new .cycle method in stagger. Will that be something I can leverage? Or any better/simpler ways?
  18. Hi, thanks for your input and engagement in advance. Part 01: http://codepen.io/mikeK/pen/jqWJYj ok., but no random time. Part 03: http://codepen.io/mikeK/pen/yOerpb?editors=1010 random time super, but no animation of the tongue Next: I want to synchronize the arm and the signs (part of svg). What´s the best way to handle the animations? Just for fun and an example that I love GreenSock: http://codepen.io/mikeK/pen/qZbzdN?editors=1000 Best regards from Hamburg Manfred
  19. Hi there, i'm trying to replicate an animation i did in After Effects using the Wiggle expression. The problem is that my animation in Greensock is far from looking as 'fluid' as the one i did in after effects. The way i did my animation in after effects i set up how much a value will change and the frequency of this change. for instance: wiggle(freq, amp) wiggle(2, 50); Have a look at the code i created, on the same link you can check out the animated gif i'm trying to replicate. http://codepen.io/anon/pen/qBxir/ The animation is basically a constant wobbly effect on all those icons, i also want the animation to be random. Do you guys see this as a good way of doing this? I tried changing the easing but i still couldn't get it to look close to the gif. Is there a better way of doing this? Cheers, Thales
  20. Hello:-) I wanted to know is there any way to reuse same timeline to animate to random points at each replay? On each event I would like to make some animation that has mid animation random each time. This is what I came with(simplified code): var tl = new TimelineLite(), element = $('#element'); function onEvent(){ tl.kill(); //I don't know if this best way to clear whole time line tl = new TimelineLite(); var rotation = randomInt(-45,45); tl .to(element, 0.6, {rotation: rotation }) .to(element, 0.2, {autoAlpha:0}); } //I have other animation that returns it to start points on different event So in this animation element is rotated by different number each time event occurs and then hidden. Different animation returns it to start points. I wonder if I can achieve same thing without creating new timeline each time. And if this is not possible, could you tell me if this is most efficient way of doing things and I wont use all memory after while ? With kind regards.
  21. I'm trying to create an interactive illustration that requires a bunch of coins to be flipped when a button is clicked. I managed to hack together something that works and builds a new timeline every click, but I can't figure out why the very last coin in the series won't animate. I'm new to GSAP and a javascript novice, so it could easily be something very simple. Any insights would be appreciated. http://codepen.io/misterjworth/pen/EjGrGL?editors=001
  22. I'm trying to randomize some settings in a tween. The first time it gets random values, but each iteration thereafter is identical. function RandomTween(e,o,w,h){ TweenMax.to(e, 0, {x:(int(o.left*w)), y:(int(o.top*h)),rotation:getRandomArbitary(1.05,6.25)+"rad"}); TweenMax.to(e, getRandomArbitary(0.5,5), {y: o.animation.to.y*h,repeat:-1,x: o.animation.to.x*w,force3D:true, rotation:getRandomArbitary(1.05,6.25)+"rad",ease:Linear.easeNone,onComplete:function(e,o,w,h){ RandomTween(e,o,w,h); },onCompleteParams:[e,o,w,h]}); } /** * Returns a random number between min and max */ function getRandomArbitary (min, max) { return random() * (max - min) + min; } var seed = 1; function random() { var x = Math.sin(seed++) * 10000; return x - Math.floor(x); } Am I missing something here?
  23. Hi Greensockers - you will see that my trouble is not Greensock but rather incorporating a two dimension Array to feed back into the TimelineMax tweens that I have set up. I have seen that it's possible to have the Tweens inside the array as it loads and have attempted that as well. I'm fairly sure that my limited programming knowledge hasn't helped me and I apologise for the circuitous methods employed. If anyone has time to plough through all this I would appreciate any help you can provide. Once I have the array loading and feeding I will add some colouration. Many thanks - Trevor Forgot - CodePen working is: http://cdpn.io/mkCJd and non-working is: http://cdpn.io/Abjip http://codepen.io/thorntontf/public/ greensock.html greensock array test.html
  24. Hi, I'm looking for animation similar on this video http://www.youtube.com/watch?v=pQT4JYUUDJc if possible. As a beginner I tried using while loop and tween my Array of stars. My approach was insert multiple tween and use different delay on each one to make it random, but insert is not working in loop and if I use add they twinkle one by one. To make it more random I made 16 different Arrays with same stars, but again result was too uniform. Is is any chance to twinkle whole array randomly and multiple stars at ones similar to video above? I'm sorry for my code, it is not very nice. I'm not programer and I'm using Tween for fun. It is nice tool to make AS animation easy even for me. Here is my code: var arr01:Array=[s070,s066,s047,s029,s015,s101,s119,s134,s149,s160]; var arr02:Array=[s083,s058,s040,s024,s011,s108,s125,s127,s145,s154]; var arr03:Array=[s076,s062,s050,s036,s019,s001,s085,s106,s124,s155]; var arr04:Array=[s073,s082,s045,s032,s021,s006,s110,s140,s135,s159]; var arr05:Array=[s075,s061,s060,s044,s012,s005,s095,s118,s138,s152]; var arr06:Array=[s080,s088,s052,s041,s027,s002,s111,s139,s136,s161]; var arr07:Array=[s071,s084,s048,s030,s017,s009,s097,s115,s129,s150,s053]; var arr08:Array=[s072,s065,s038,s025,s003,s092,s104,s123,s117,s147]; var arr09:Array=[s079,s054,s037,s120,s007,s091,s102,s122,s133,s144]; randomBlinkBt.addEventListener(MouseEvent.CLICK, randomBlink); //randomized array function shuffleArray(arr:Array):Array { var arrShuff:Array=[]; while (arr.length > 0) { arrShuff.push(arr.splice(Math.round(Math.random() * (arr.length - 1)), 1)[0]); } return arrShuff; } //random Twinkle array function randomBlink(ev:MouseEvent):void { arr01=shuffleArray(arr01); var blinkTime:Number=0.5; var timeLineBlink:TimelineMax = new TimelineMax(); var i:int=arr01.length; while (--i > -1) { timeLineBlink.add(TweenMax.to(arr01[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); timeLineBlink.add(TweenMax.to(arr02[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); timeLineBlink.add(TweenMax.to(arr03[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); timeLineBlink.add(TweenMax.to(arr04[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); timeLineBlink.add(TweenMax.to(arr05[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); timeLineBlink.add(TweenMax.to(arr06[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); timeLineBlink.add(TweenMax.to(arr07[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); timeLineBlink.add(TweenMax.to(arr08[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); timeLineBlink.add(TweenMax.to(arr09[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); } } Any help or point to right direction help. Thank you
  25. Hi everyone! Let me start by saying GSAP is awesome. I was wondering if anyone had ported the RoughEase library from AS to JS, or something similar to that? I'm working on a project where I need to randomly affect elements over time (smoothly), and I think RoughEase would be amazing for the job. More specifically, I'm trying to replicate some old film effects – grain, shifting picture, flickering bulb, etc. My current solution is to start a tween for a random duration/value, then delay the next tween by a random amount, and have that process loop, effectively creating a sort of randomness to the flicker. I suppose it works, but it doesn't look great yet and doesn't feel as elegant as the RoughEease soltuion. Thanks in advance!
×
×
  • Create New...