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.