TradingBo

Hi Zach, Thanks for the quick response. I'll definitely have a read through that article, still getting to grips! I think the tweenTo() direction might be best solution from the sounds of it, I was just trying to avoid adding too much timeline logic to the mix. The tl.restart() method for single timelines is just so simple, thought there might be a similar solution along those lines! Thanks for the heads up @tailbreezy i've updated the codepen to fix the issue, now it actually works. I'll post the final snippets here when I get there.

Hi Support, Having a bit of difficulty toggling between GSAP timelines for a menu animation. Do I need to clear/invalidate timelines to return them to original state before triggering them again? const menuIn = gsap.timeline({ paused:true }) const menuOut = gsap.timeline({ paused:true }) I'm trying to elaborate on this shorthand if/else statement using tl.reversed() with a single timeline ( which works great ) . tl.reversed() ? tl.restart() : tl.reverse(); When trying to adapt it to use tl.paused() with two separate timelines I can't quite get it to work. // on click event listener menuIn.paused() ? menuIn.play() : menuOut.play() && menuIn.paused(); // if paused => play in => else play out && set in to paused again It works once for each animation, then fails to iterate on subsequent clicks. Would I need to reset the timelines to original state somehow in the statement? Also having a weird DOMException error in Codepen trying to use GSAP x3 on there for some reason, have I declared gsap.timeline wrong for this version? https://codepen.io/EasterIslandMedia/pen/vYyVXyO

Thanks @OSUblake! I realise this is more of a general JS thread than specifically GSAP at this point so I appreciate you going above and beyond. Have to say the levels of support on this forum and on GreenSock in general are simply phenomenal. As a beginner it's incredibly encouraging to see you guys care about users (of all levels) and is making getting to grips with GSAP completely awesome/rewarding Will do the reading and post final animation when it's wrapped up. Thanks again!

Thanks again OSU. That's amazing, appreciate the master TL wisdom. I wasn't entirely set on where the animation might go from here ( adding, reverse, timeScale and Pause/Play functions etc ). From what I've read creating a master timeline and manipulating sub TLs at the top level was advised to be the best way of keeping code modular and making life easier down the road. I've still a hell of a lot to learn, duly noted that it's only worth it in some cases! Also see where I was going wrong not returning the sub TL's as an array thanks for the heads up. P.s Any idea where I might find more info on MediaQueryWatchers ? Can't find anything about them on W3 , Is that current best practice

Hello ! Finished our first GSAP Animation recently (massive thanks to @OSUBlake and @Carl) and just revisiting to tweak a few things. Having trouble with controlling sub timelines contained within functions, via a master timeline. Could anyone possibly let me know what I'm missing here? I suspect it's something to do with returning functions to the master timeline and not the timelines contained within them, therefore they can't be controlled at the top level. Have tried applying support given here and here but for the life of me can't get it to work as expected.. I'm trying to remove the Flutter() function at mobile breakpoint, restart the master timeline with just Sphere() then add flutter() again and restart when sized back up past 420px. Thanks!

Hi OSU, Apologies for the belated reply! This all makes a lot more sense now, have since done homework looking into the .getScreenTCM() method and has helped immensely. Thanks for the great support

Wow thanks OSU that's amazing. So can see from your answer this was more of a JS/SVG question rather than anything specific to GSAP. Appreciate the lesson! So looks like the key is anchoring the sizing of the cubes container to an SVG via a matrix using the .getScreenCTM() function. What I don't quite understand is that the cubes still have the same fixed width of 25(pixels as default)? Sorry if this is obvious but where exactly in the snippet is the scale of the .cube class being told to resize relative to it's .cube-container element... Is it quite simply because they are child elements and their container's scale is being set to: scaleX: matrix.a, scaleY: matrix.d, Thanks again!

Great library guys, really enjoying it so far. Was wondering if you could point me in the right direction re: responsiveness on the Scale & transformOrigin properties in the CSS plugin? Question: Is it possible to easily relate these to the width/height of the container element with GSAP functionality? I had a look though the Docs but couldn't find anything on this specifically. The container & contents scale well on different devices but when it comes to actually resizing the window the TransformOrigin is totally rigid. The idea is to ultimately have a pair of <svg> hands holding the globe on either side so ideally would need to be able to scale up/down with screenWidth along with the SVG. Thanks,

Also just noticed, there is an unnecessary repeat of the line tl.to(element, duration * 0.5, {opacity:0, repeat:10000, repeatDelay: duration * 0.5, ease:SlowMo.ease.config(0.3, 0.7, true)}, duration * 0.25); in the CubeSpin() function, have now removed from the CodePen

Wow thanks for the great response Carl, this is way more comprehensive than I was expecting Apologies for the belated reply have been away all weekend. You've taught me a lot about GSAP here as well as the JS Math.random() object method, really appreciate it. The catch with this approach that I can see however is that a designer can't target individual elements consistently to fix any small position or issues, not really a problem with circles but if for arguments sake you were to use a different shape it might look a little messy. So after having a play I amended the HTML to a round 90 <div> added some CSS classes to control the sizing for the centre elements, switched the Math.random() to an index calc and the elements starting .progress via index/180... et voila hopefully now a consistent sphere with opacity effect! This is arguably not efficient, so will be playing some more today to see if it can't be done more easily and maybe re-create using <svg> to see if i can't get it responsive! Thanks again though, your advice was awesome. Have amended the CodePen to reflect changes:

Hi, Loving the library so far guys just have a quick question. Is there a simple way to specify an animations midpoint and set css properties so it applies them via that midpoint? I.E a TweenMax function such as: TweenMax.from > Midpoint > To I realise this is basically how Tweens work and you should aim to chain multiple tweens together in a timeline to create multiple part animations, However I was just curious to see if there was something akin to this i'm missing as couldn't find anything in the documentation? The aim is to make the dots fade to a low opacity at the midpoint (as they rotate behind) then return to full opacity as they return to the front (and end point of the animation) ! Thanks in advance, Oli