Jump to content

Search the Community

Showing results for tags 'random'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 18 results

  1. 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
  2. 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.
  3. 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
  4. 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).
  5. 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
  6. 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!
  7. mikel

    Do we have a chance ?

    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.
  8. 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
  9. 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!
  10. 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?
  11. 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
  12. 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
  13. 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.
  14. 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
  15. 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?
  16. 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
  17. 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
  18. 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!