Gazzawazza

Much appreciated. Blimey - i didnt realise IE was so old until I saw the release date for Microsoft Edge was 2015. Thanks Though

Is there a work around for arrow functions as they dont appear to work in internet explorer. That leaves most of this GSAP code unusable in IE https://greensock.com/docs/v3/GSAP/gsap.matchMedia()) mm.add("(min-width: 800px)", () => { https://caniuse.com/arrow-functions=> Appreciated Gareth

Hello all. After running a lighthouse mobile speed test results show gsap loading multiple times. Please could someone point me in the direction of a solution so that there is only one call to gsap. Multiple calls can be seen in the screen shot below (url section). script being used to load is <script type="text/javascript" defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js" integrity="sha384-mUyQRb/yhtJWqlv3fPkIK0lXp0AVKrfUopz91cdXZMvDm79dbPd7MMVu2CRGhhjL" crossorigin="anonymous"></script> this is placed first in the line of calls at the bottom of the html body and before other scripts (custom js etc ) Thanks gareth multiple call can be sen in the image below.

Hi, Ive been reading through the common mistakes - still have some to rectify such as storing numbers in strings. However, Im confused how to pass a variable into the timeline. I am using $Work = $this.find("ul.List-Prices-Three > li"); within a .on Click event and then calling play() The closest I have got is to call tl1.play(0); from the function play1(); which is outside of the click event $Work passes into play1(); ok but I cannot figure how then to pass $Work into the timeline which is outside of the play1(); function https://codepen.io/Gazzawazza/pen/MWyrzGg

Wow.. First of all thanks for your quick response and answering my question. Second.. cant believe I missed that... Whoops. Not surprised I'm making common mistakes though will read the article you sent. Much appreciated. Would you give me an indication to which mistakes I'm making please??

Hi - hopefully not too daft a question but I cant figure how to get the divs to open from top to bottom while keeping the list <li> inline at the top. In other words the x3 red drawers should stay inline at the top while the content div opens downwards. I guess Im missing the blindingly obvious but I just can see it... Thanks for any help given gareth

I have recorded a screen shot of the problem. The short video starts with clicking slowly from tab to tab then I speed up the random clicks You will see the formatting drop from being inline and also disappear. The .mov is at the url below shorturl.at/btJ36 Much appreciated Gareth

Hi thanks for the reply. To clear up problem one. Things are happening they way should until you click from tab one to the next tab too quickly and then the formatting breaks. When you click from tab 1 to 2 to 3 quickly you will see the css formatting drop, E.g. instead of the grey content boxes opening from the same point below the tabs, sometimes they open further down the page. It’s as if when tab 1 to tab 2 to tab 3 are pressed too quickly their relative timelines are not cleared or stopped and so the next tab opens up under the the previous instead of inline, sometimes the grey content boxes disappear. Easiest way to see the problem is randomly click tabs quickly and the formatting change will be evident.

Thanks for the reply. Each if statement is relative to its own tab as defined by the index. if index == 0 then play timeline, etc. Unsure how to simplify that further, not saying it can’t be, just that I don’t know how to yet. (still a lot to learn) However, The problem is if the tabs are clicked too quickly, I.e quickly from one to the other the previous tabs timeline doesn’t stop plying and often there is a break the css formatting e.g instead of the tabs. the effect when working is as it it’s in the code pen if clicked slowly, however, The problem is created when clicking from one tab to the next quickly, the css positions shift. also the 2nd problem is when Adding timescale to the reverse functions doesn't work - I have left an example of the timeScale issue in function rev3() e.g. function rev3() { tl3.reverse().timeScale(3); } ; thanks Gareth

Hi all, first of all apologies in advance if my code is -- well, lets say not very good but.... I have something working but falls over in a couple of places. 1) I am unsure how to stop / reset a timeline playing when another starts i.e if I click on the next tab before the current tab has finished playing its timeline, the new tabs timeline shifts the css down and both previous and new timelines play. This only happens if I click the next tabs too quickly. I am aware that I can somehow kill or stop other timelines but cannot figure how to implement this or if I am barking up the wrong tree. Please can you point in in the right direction?? Also, 2) Adding timescale to the reverse functions doesn't work - I have left an example of the timeScale issue in function rev3() e.g. function rev3() { tl3.reverse().timeScale(3); } ; https://greensock.com/docs/v2/TimelineMax/timeScale()

HI Shaun, Thank you for your reply and solution.....of course set... I can be thick sometimes. Much appreciated. I am making a lazy load instead of using stock jquery plugins.

Hi all, is there a way to change multiple background Images? I have found GSAP resources to animate background images but not to replace multiple ones. Am guessing it easy but I tried and....failed. The second image seem to always override the first. Thanks in advance

Hi guys, GSAP rocks however, your ScrollTo plugin doesn't seem to work on iPad 2 upto date iOS. NB this means the official GSAP ScrollTo example as presented does not appear to work. Here is the GreenSock codepen that doesn't appear to work Please can you let me know any work arounds ?

Hi, First of all GSAP rocks, loving it. Although, I am a newbie. I have found a code pen which is a great feature however, could someone give a little direction on how to make this touch event and not just mouseover. I have dabbled with .on('touchstart' etc However, dabble is the best term as I could do with some guidance. Thanks In advance.