spacewindow

Thanks again PointC. Nice.

@PointC I realised that I set up my example a bit incorrectly, sorry. It's actually the Timeline that is meant to repeat infinitely, whereas in my last example It was a single tween within a Timeline. I managed to do what you suggest, but had to add my ballRed timeline into another timeline (loops) then tweened loops.time() to achieve the same effect. This seems a bit complicated, even though I'm glad I got it working. I even added an extra timeline to the loops timeline and it all worked pretty well. Wonder if you, or anyone, can make a simpler example, or explain further.

Wow that's a bit clever @PointC. Would not have thought of doing it that way, think that is going to work. If you don't hear from me again that solution has gone into production! Thanks for your prompt assistance.

Hey guys, seems like this should be basic and I'm missing something. I want to create a looping timeline, which can then be made a child of a main timeline. When main timeline is scrubbed the looping timeline in parallel with the main timeline. ie I have a 1 second loop. My main timeline goes goes for 3.5 seconds, but is paused so I can control it through scrubbing. I embed the loop in my paused main timeline. When I scrub the main timeline forward, the loop should have played 3.5 times (eg will end half way through), and pause. Do you remember the old days of flash, where you could create a looping animation, add it to another timeline and and set it to Graphic, which would allow you to see all looping elements in the same timeline/ scrub back and forth? That's what I want to do! Thanks

Thanks guys, I will try to replicate it in a CodePen demo, might be tricky to replicate our tech environment, but I'll give it a crack. Jack - pretty sure its related to what Greensock does under the hood, not SVG-in-iOS related. I had to make a working version of the ad, using jquery.transit (and a couple of manual bug-fixes to get that awful library to work). However, the animation ended up smooth. This version has Greensock still in the 320 banner, but jQuery transit in the Top/Tail parts of the ad. http://create.playground.xyz/qifohe/4/quiet?pos=header-ad&size=320x50 Will try and get that CodePen together - could take a while. Thanks for your time!

Hi folks, just wondering if anyone can help me with where to look to find out why I am getting performance issues with Greensock in the following circumstances - in iOS Safari, using our custom ad formats. I work for a mobile advertising company, we create custom ad formats which display on a number of sites around the world. Basically we serve animated creative into iframes on article pages, and these iframes animate and appear in various ways on the page that help with customer engagement (see examples here to get some context http://playground.xyz). I've had some issues with one of our Ad Formats (Top and Tail) when it comes to using Greensock inside a moving iframe on iPhones/iOS. iOS places limits on rendering performance for external content in iframes. PLEASE VIEW THE LINKS BELOW ON AN IPHONE... I made a Greensock animation in our Side Push product which worked really well on all devices - http://create.playground.xyz/vusada/25/quiet?pos=header-ad&size=320x50 I made a similar creative in our Top and Tail product using Greensock and get major jank issues - http://create.playground.xyz/zowuzo/27/quiet?pos=header-ad&size=320x50 (You can see the animation working well in the 320x50 banner, but broken in the Top and Tail elements that APPEAR ON SCROLL) I'm just wondering if anyone can give us an idea of how to look 'under the hood' of Greensock to find out if there is anything we can do to fix this performance issue, in our iframes on iOS. We'd love to use the library more extensively, but not sure how to address this performance issue. Many thanks in advance. If it helps you can sign up free for an account on our creative platform (a JS Bin port) and have a play with the code. Sign up here https://create.playground.xyz/login, then open this link ( http://create.playground.xyz/zowuzo/27/edit) to edit our top and tail / check out the JS.

Just wanted to keep this topic alive, and say I've been hoping there might at some kind of plugin where I can somehow unleash my Greensock skills in the After Effects space. I never thought coding animations would actually be so much simpler than using a UI!

Spine animations integrated into Greensock!?? Drool. I wondered if there have been any advances on that since April last year? Using this exported JSON data for these complex animations?

Thanks Acccent, yes I considered doing something like that, and for this case it is a pretty elegant solution! I think I will have a play with the waveSVG() function. PS I snuck in a sub question about targetting and animating specific points in an SVG – but I will post this as a separate topic. Thanks all.

Just wondered if any geniuses out there had any tips for a clean undulating animation for a path? Like a balloon string, or water, or a cape or sheet in the wind? I know there are various ways to approximate it, and I have fiddled around a bit previously, but wondered if there is a good method to do this. Perhaps an SVG path with lots of points and straight lines between, where you can run a stagger animation on the points? But then you'd have to be able to target points specifically in the SVG somehow. Would love to know your thoughts. Very basic example included, but you can see the curvy paths with control points don;t animate so well. Thanks

Perfect, thanks once again Diaco. I tried using .call() to do this previously, but it doesn't have the position parameter that .add() has. That was my issue.

Hi team, this should be an easy one. I have two timelines the main timeline (mainTL) and a separate 'loop' timeline (overTL), which is paused, but not added to the main Timeline. I want to cue overTL to start at a specific point on the main timeline. But I can't find what the syntax is to do this – just to move ahead was forced to use the onComplete callback to play 'overTL'. var overTL = new TimelineMax({paused: true, repeat: -1}); var mainTL = new TimelineMax(); overTL .to('#element', 1, {property:value}) (etc...); // MY FUNCTION FOR PLAYING IT so I can use it from mainTL function playIt(timeline, offset){ timeline.play(offset); } mainTL .set('#neon', {scale: 0.1, transformOrigin: 'center center'}, 'startDust') // CUE overTL at this point .set({}, {onComplete: playIt, onCompleteParams:[overTL, 0]}, 'startDust') .to('#neonfade', 1, {opacity: 0},'startDust+=0.3') (mainTL continues ...); I created a function to do it, but just wondered if there is a more straightforward way to get this working in Greensock? There must be!! Kind of like what I used to do in flash where you would start a movieClip loop at a specific point in your main animation. I would like to be able to completely cue this timeline from the main timeline as needed – pause, reverse, seek etc. But obviosuly don't want to have to write a custom function for each of these if its already part of the plugin. Sorry I'm sure this must be obvious, thanks.

Thanks Diaco.

Hi guys, Trying to get a conditional 'repeat' happening with a stagger animation. I want to be able to set a boolean variable (cloudsOn) and if this is true, certain tweens will replay. If it is off, the tweens will not replay. I've managed to get this working in other more custom javascript ways (thanks to help on this forum), but wanted to see if there was a simple way using a stagger loop and onComplete to get this happening. I will post a CodePen but this may be enough to check if it is a simple fix. Thanks. // five .cloud elements in my SVG var cloud = document.querySelectorAll('.cloud'); var tlClouds = new TimelineMax(); var cloudsOn = true; var cloudCheck = function(tween){ if (cloudsOn){ console.log(tween); // Successfully logs the individual tweens of the stagger, targeting individual .clouds. tween.seek(0); } }; tlClouds .staggerTo(cloud, 2, { cycle:{ x: [-400, -200, 0, 300] }, onComplete: cloudCheck, onCompleteParams: ['{self}'] }, 0.2) ;

Interestingly, one of my word shapes (you) was still doing the counter-swapping morph behaviour. However, once I set 'map: complexity' on this morph it was fixed it. The other two word morphs no longer needed it with your update. I will update this post with a new pen once the demo is complete.

Yeah I am a doofus – turns out I had put in 'shapeIndex: "complexity" ' instead of "map:complexity". So sorry! Glad my incompetence has spurred even more amazing Greensock innovations. Amazing work. Have updated my pen pulling in your new js.

No unfortunately that scrambles the SVG Morph animation pretty badly...

Hey guys, Been having a go with morphSVG which is pretty amazing. The answer to this may be simple ("your shape is too complex") but I am so close to a good result, thought I would ask. I've done three morphs on three different words in this Balloon animation - its a subtle shift which make the words appear to be on the balloon. In all three cases the morph works perfectly – except for the counters of the letters 'swapping' during the animation. This is the only issue on all three morphs! I wonder if there is anything I can do about it? I suppose I could break up the lettering into separate morphs, but: 1) wondering what that would do to performance 2) its a big extra hassle on the design front, but can be done Alternatively, I go for a 'less accurate' tween and abandon the morph for a scale/squash somehow. Thanks for your advice! NOTE: Have a play with my pen. The final animation will have three balloons saying You Made It! You can show and hide the words using the code and animate them.

Yes I also realise my pen is still setting individual classes on the elements in order to target my animations – which yours did not require in the createClouds function. Setting the individual classes not necessarily a bad thing? But good to cut out unnecessary steps. You've convinced me, I'm going to use a stagger method for this - being able to set an even spread of dustclouds to begin with is going to be useful. Thanks a lot for helping out so quickly!

Thanks Tahir, this is awesome. That stagger method is interesting. After examining your code, I also reworked my version using Javascript 'for' loops: http://codepen.io/spacewindow/pen/qbEQJX Though I don't think performs amazingly, as it currently does everything 'inline' as it were (my for loop is not cached in a function). I will fix this. Do you have an opinion on what is more performative – using the stagger/cycle method, or basic for loops? My other learning in all this has been to use a loop function to generate the timelines for each cloud individually, then add them to a main timeline. I think I was overwriting parts of my single timeline as I went by trying to add tweens there immediately – hence the weird effect where the clouds were being .set() at the completion of animation, rather than at the start. Though this behaviour is still confusing to me. I don't know why the whole animation didn't just fail instead of partially working Thank you so much!

Very exciting – I've learnt a lot from doing this, and not just about Greensock, but also some Javascript concepts as I've googled my way through your code (which I think I now understand in full). Thank you so much for your generosity and time!

Hi guys, Having issues getting my 'dustcloud' generator function in Greensock. Objective: Target a created element (in this case, and <image> inside my SVG) and duplicate it to the number of 'clouds' I wanted = SUCCESS TweenMax.set random start value for x: y: and opacity: for 'clouds', without having to target individual class/id names = FAIL. All got set to same, so... Made a new attempt to TweenMax.set random values for attributes by giving individual class names for elements on duplication = SUCCESS. However, when I follow this up with animation using TweenMax.to... Create random destination for clouds using TweenMax.to values for x: y: and opacity: for individual elements = FAIL. Animation only works for one element, then when animation finishes it SETS the remaining elements. I'd like to know: whether the setting can happen on all elements prior to animation. if this can be done without making individual classes for each element (though this is not essential, just thought it might be more performative or something...) Apologies, I'm sure i've gone about this in a fairly hacky/clunky way, but have been at it for hours – any direction will be appreciated.

Hi OSUblake, Fantastic solution, is there any chance you could explain some of your code for a Javascript rookie like me? I have a pretty basic understanding of caching – how does the onComplete work in this example? From what I understand, it makes this particular timeline invisible ( autoAlpha:0 ) pauses it ( tl.pause() ) then... adds the tl again to the cache ( cache.push(tl) ) ? I'm not quite sure as it seems you would end up with exponentially increasing number of objects in the cache... but obviously we don't ... can you explain? Can you explain what is happening in your emit function? Particularly curious about line 69 (using && instead of an if statement I think?), what is this doing? if (elapsed > frequency) { var tween = cache.shift(); tween && tween.play(0); last = current; } Hope you have the time to satisfy my curiosity, thanks.

Hi guys, I'm new to Greensock and particle animation and have been hacking away with simpler examples of this awesome pen you created for 3d particles. http://codepen.io/GreenSock/full/LVzxzR/. What I want to achieve is being able to turn the particle emitter on and off like a tap (eg the already moving particles will complete their journey, but no new particles will be created by the emitter. I experimented with trying to use kill({repeat:true}) for my timeline, but this had no effect (though I successfully turned off individual animating properties in my timeline, such as the y position of particles with kill({y: true})). Is such an effect possible? I would like the tap to stop in a more convincing way. I know there may be a less manual method using on of your Physics plugins. Thanks!