it en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en it it en en en en en en en en en en en ca en en en en en en it en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en de en en en en en en en en en it en pt en es en en en hu en en en es en eu en es en lt en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
Hi - Im not sure how to code GSAP to stop causing a Cumulative Layout Shift (CLS) which is being flagged in the Chrome Lighthouse Audit - i.e not good for user experience.
I know when I set a div with GSAP to 0px height overriding its CSS height, it is causing the divs below it to then shift up into the space that was being occupied by the div before it was set to height: 0. Hence the Cumulative Layout Shift.
The div height in the css code can't be set to height: 0, it needs to be auto and then set by GSAP to height: '0'
I plan to use GSAP for my accordions, menu reveals etc but I keep causing a CLS which increases the more div reveals I add.
Can someone please help point me the right direction?
Please click on the orange div to reveal hidden div. I have removed fonts from this example so there is no issue with CLS based on fonts loading. Hopefully that helps?
Gazzawazza posted a topic in GSAP
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    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.
Gazzawazza replied to Gazzawazza's topic in GSAP
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
Gsap on inline Block
Gazzawazza replied to Gazzawazza's topic in GSAP
Wow.. First of all thanks for your quick response and answering my question. Second.. can't 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??
Gsap on inline Block
Gazzawazza posted a topic in GSAP
Hi - hopefully not too daft a question but I can't figure how to get the divs to open from top to bottom while keeping the list   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
Gazzawazza replied to Gazzawazza's topic in GSAP
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
Gazzawazza replied to Gazzawazza's topic in GSAP
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.
Gazzawazza replied to Gazzawazza's topic in GSAP
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
Gazzawazza posted a topic in GSAP
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()
Changing Multiple Background Images
Gazzawazza replied to Gazzawazza's topic in GSAP
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.
changing multiple background images
Changing Multiple Background Images
Gazzawazza posted a topic in GSAP
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
changing multiple background images
ScrollTo doesn't work on iPad 2
Gazzawazza posted a topic in GSAP
Hi guys, GSAP rocks however, your ScrollTo plugin doesn't seem to work on iPad 2 up to 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 ?
Touch events with Tilt
Gazzawazza posted a topic in GSAP
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.
“I continue to be astounded by the sheer breadth of what @greensock can do. Every time I'm like "ooh, I wonder if I can do X", it turns out I can!”
“I’ve long felt like GSAP is the best kept secret in JavaScript.”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“GSAP IS the animation library and has been for years. If you're gonna learn one - this is it.”
“I absolutely love working with GSAP. It’s been one of the most enjoyable things I’ve ever studied and the team do a fantastic job of making it first of all but also in the fantastic forums. I’ve managed to learn so much from that so I’ll always be gratefu”
“GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes.”
“Sincerely, the people behind GSAP are sorcerers”
“With the incredible functionality, and the mind-blowing customer service, the price of Club GreenSock admission is well worth it!”
“GSAP, the rolls-royce of JS animation frameworks. Still going strong!”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.