robwebb364

Thankyou, AncientWarrior! will post shortly on lessons learned

Hello again good folks, Im trying to get to grips with animating multiple elements to different (randomised) attribute values. In the codepen, a loop adds a TweenMax to the timeline for each of the red ellipses. However, the repeat and yoyo do not work - the animation only runs once. ive tried numerous variations, but Im missing something..

bloody hell thank you!... and was not working on desktop due to some combination of wrong syntax and mistypes... its late here. now sorted!

BTW the codepen doesnt complete the dynamically generated ellipses, but this works on my machine. - however the animation does not. thanks

i really want to select all of a class to each be rotated: please see the codepen How should I do that? Ive seen somewhere that the selector should be $(".classname") but either that is wrong or the GSAP syntax is wrong. grateful for help --

thanks, both of those work on the codepen.. I was sure Id tried that! but the problem is complicated in that i really want to select all of a class to each be animated: How should I do that? Ive seen somewhere that the selector should be $(".classname") but that dont work! grateful for help -- the js is like this: var peep=new Array(); $(document).ready(function(){ for (j=0; j<=20; j++) { /// no of paths var randx=parseInt(getRandom(0,1800)); var y=900; peep[j] = document.createElementNS('http://www.w3.org/2000/svg' 'ellipse'); peep[j].setAttributeNS("null", "class", "peeple"); peep[j].setAttributeNS(null, "cx", randx); peep[j].setAttributeNS(null, "cy", y); peep[j].setAttributeNS(null, "rx", getRandom(15,20)); peep[j].setAttributeNS(null, "ry", getRandom(20,40)); peep[j].setAttributeNS(null, "fill", "grey"); peep[j].setAttributeNS(null, "stroke", "none"); document.getElementById("svg").appendChild(peep[j]); } var tl = new TimelineMax({repeat:-1, yoyo:true}); tl.to($("#wob"), 1, {rotation:"90", transformOrigin:"left top"}); }); function getRandom(min, max) { return (Math.random() * (max - min) + min); }

Please help. Despite many efforts this is not rotating the ellipses.. ive followed the same syntax which has worked before with other attributes being animated, and checked other codepens which seem to work! GSAP seems very sensitive to syntax, and the docs on line are not helpful... thanks

thanks, that's useful

think I have figured this out, using the tween.timeScale() command to vary the speed now the square on the right blinks at a varying rate http://codepen.io/robertwebb364/pen/giBnp

The codepen has two black rectangles which appear and then disappear. One has an onComplete function which randomises the time variable, but this does not work.. the timing remains the same. How might one do this? Presumably we need to stop the repeat, reset the time, and restart it? Thanks for help.

OK I think I have solved the first part of this. As I am using 'yoyo' it is not necessary to put in the parts of the animation which take the opacity of each element in turn back to zero - GSAP does that for me. The code on dropbox is now modified and appears to work without pause. thanks for commenting [ im not sure the time randomisation is working, will post separately]

BTW Im running Chrome Version 36.0.1985.125 on a MacBook Air 2011, OS 10.9.1 The same problem occurs in Firefox. --- There is a secondary issue: the code on dropbox has a function to randomise the timing after each cycle, but this is not working. Presumably I have to stop and restart the GSAP animation in order for the new time variable to have an impact - How do I do this?

thanks for comments a full test file with images is at : https://dl.dropboxusercontent.com/u/70207338/tweenmax%20pause%20issue/grove%20park%20leaves%20tweenmax.html this shows the pause, after about 10 seconds, lasting for about 4 seconds. the css file is this: https://dl.dropboxusercontent.com/u/70207338/tweenmax%20pause%20issue/stylemult%20grove2.css and the Greensock JS files: https://dl.dropboxusercontent.com/u/70207338/tweenmax%20pause%20issue/TimelineMax.min.js https://dl.dropboxusercontent.com/u/70207338/tweenmax%20pause%20issue/TweenMax.min.js

Have a sequence of overlaid images, am animating their opacity. The animation is looped, but pauses mysteriously for three seconds or so at certain points. Frustatingly the codepen does not recreate the issue - using coloured boxed only, it seems to proceed without pause. Am using image files each 590 kb (1024 x 768). Please note - this is designed for use as a local site only. Is this something to do with the browser cache? Am using Chrome on a Mac. The overlay of CSS animation does slow it down, but removing it does not rid the pausing issue. Alternatively, could it be that the CSS opacity is somehow reverting to the pre-animated state? Developer tools shows that the animation processing continues, during the pause in which it does not appear on screen. thanks for all help