kevywalton

Hey @Cassie, thanks for your feedback and assistance. It's much appreciated. I've made my changes and corrected the issue. However, I will say that I have been using keyframes with version 3.5 for almost 2 years now and never had an issue with it other than when I use it for CTA button pulses. It works well in chrome most times but some of the other browsers were not great. Maybe now with the new version update it will be more stable across other browsers... Thanks again.

Thanks for your feedback @Rodrigo its much appreciated. I've made the necessary changes and will keep this in mind for future builds.

Ok, I have been over thinking this animation WAY too much!! LOl I replicated a very similar and smooth version by simply using a height reduction on the mask element: .to(["#fade-mask-left", "#fade-mask-right"], { height: "0%", duration: 0.75, ease: "power1.out", stagger: 0.15 }, '<+0.1') Nevertheless, I am concerned now still about the new version update causing such a difference to my previous animation!! Will this start to effect other creatives that I have built and are running live?

I had made an animation ( a portion of which is viewable in the short video attached ) an at the time I was running version 3.5.1 of GSAP. The animation was really smooth and worked well. However, I am now being forced to use version 3.11.1 and it no longer "likes" this animation and will not run it the same way at all?? The original code for this animation was: .fromTo("#fade-mask-left", "#left-image-1", { duration: 1, ease: "back.inOut(1.7)", keyframes: [ { top: 0, opacity: [1, 0] }, { top: "33.33%", opacity: [0.75, 0.5] }, { top: "66.66%", opacity: [0.5, 0.75] }, { top: "100%", opacity: [0, 1] } ]}, '<+0.25') .fromTo("#fade-mask-right", "#right-image-1", { duration: 1, ease: "back.inOut(1.7)", keyframes: [ { top: 0, opacity: [1, 0] }, { top: "33.33%", opacity: [0.75, 0.5] }, { top: "66.66%", opacity: [0.5, 0.75] }, { top: "100%", opacity: [0, 1] } ]}, '<') If I try to run this code with the new 3.11.1 version I get error warnings that there is a missing plugin: Invalid property 0 set to # Missing plugin? gsap.registerPlugin() Invalid property 1 set to l Missing plugin? gsap.registerPlugin() Invalid property 2 set to e Missing plugin? gsap.registerPlugin() and on and on, basically saying that there's an invalid property set on "#left-image-1" ?? Now I have changed the code so as to get rid of this error / warning by splitting it up like so: .to("#fade-mask-left", { duration: 1, ease: "back.inOut(1.7)", keyframes: [ { top: "0%", opacity: 1 }, { top: "33.33%", opacity: 0.75 }, { top: "66.66%", opacity: 0.5 }, { top: "100%", opacity: 0 } ]}, "<+0.25") .from("#left-image", { duration: 1, ease: "back.out(1.7)", keyframes: [ { top: "100%", opacity: 0 }, { top: "66.66%", opacity: 0.5 }, { top: "33.33%", opacity: 0.75 }, { top: "0%", opacity: 1 } ]}, '<') This stops the errors / warnings and runs the animation but as you can see from the codepen ( albeit its in plain colours ) the animation is now rubbish. Its all janky and doesn't work properly at all. I have attached a shortened piece of an original animation I had running on my actual creative Ad so you can see how smooth the animation was... can anyone please assist with this issue?? It would be very much appreciated ? ? strip-animation-gsap.mov

@Carl Thanks, I really appreciate it. That's make sense and its nice and concise. ?

Hey, Sorry for this simplistic question! I have a pretty basic banner Ad animation that I want to open with a kind of full banner Logo presentation that fades out and then the rest of banner animates with the usual slide left-to-right and up-down etc,. This animation should run for 3 iterations however, I do not wish to have the first tween - the logo fade out to happen other than the first time. I'm trying to do this without building a loop and was wondering if there is a neat, clean way to do so by adding some sort of onComplete or something to the initial tween so it is ignored for the last two cycles? Please see the codepen for a basic version of what I'm building. This first tween: `.to("#intro-panel-logo", { duration: 0.75, autoAlpha: 0, ease: "Power2.easeIn" })` is the the one I want to run only once at the start... Thanks folks. Any help much appreciated

Agh ok. I get what you mean now but unfortunately its too good a question because I don't know how it works properly in Firefox in that example?

That's actually the easing scale that I use. It still caused issues with a number of browsers for me but the rotationZ and Z positioning definitely improved the quality across browsers. I've haven't done so here but it can also improve quality if the image you use is only scaled up to 100%. Here's the exact single tween I used in one of my Ads: .fromTo('#image1', { scale: 1 }, { scale: 1.07, duration: 3.5, ease: "expoScale(1, 1.07)", transformOrigin: "50% 50%", z: 0.1, rotationZ: "0.01" }, '<')

Sorry, I've done a bit of testing on this and it works great with a dynamic variable. I'll close this ticket...

Question. I'm building banners which use dynamic text data. Let's say I have a flexbox with a set characters limit, ie; 30 Characters max. Nothing too long as it has to fit into a relatively small banner format. The banner runs for 3 frames. Therefore, frame 1 says something like "Get Rich Quicker with our company". Then frame 2 changes that text to "Join the new revolution" and a final frame ( frame 3 ) then says "Today is your day to become something more". Now, the exact text that will be pulled into the banner will not always be known in advance and will therefore NOT be hardcoded. Therefore, something like this: `tl.to("h1 span", {duration: 4, text:" Join the new revolution!"})` only works when you know what the text your going to use will be and hardcode it. Can this be used with say a variable? Let's say I declare the variable, can I then use something along the lines of `tl.to ("h1 span", { duration: 4, text: frame1Copy })` whereby frame1Copy is the variable containing the text that is being pulled into the creative at the time?? Thanks in advance for any assistance with this. Regards, kevin

If I use Force3D it breaks in Safari but when I add BOTH the rotationZ & z:0.1 it smooths things right out in Firefox... Thanks. This was causing me serious headaches!!! LOl..

changing the rotationZ from 0.01 to 0.1 and then removing the `image-rendering: -moz-crisp-edges;` has significantly improved its performance in Firefox. Thanks for your assistance here Jack and Zach..

@ZachSaucier or any other members... So the issue with the zoom / scale and janking ( blurring of images ) is still happening. I have it pretty smooth on Chrome and Safari but Firefox is just "poor"!!! I have made a basic Codepen: kitten image codepen which you can test in chrome and see the scale effect run well but in Firefox it is janky. This example is actually "not that bad" compared with the high res images used in my actual banners. There are also some other animations with text and stuff running at the same time in the real banners. I have tried to smooth this out using all sorts of `image-rendering` CSS rules on the image element and included `will-change: transform;` too. I shall screen shot all those rules I have attempted to correct the issue with, however, I have obviously tried each of them separately and in conjunction with one another in a multitude of combinations but to no avail!! Any suggestions here would be most appreciated folks ? ?

Interesting, thanks @mikel ?

Hey @ZachSaucier The reason for using classes (javascript) and not GSAP has to do with how the animation is fired (not important here but there was a reason). The codepen is just a sample to show what's going on here, its not fully representative. Unfortunately, I cannot use responsive fonts as the font being used in each case is typically a custom font created (or chosen) by our clients! With regards to using SVG, the text used on the CTA is typically dynamic and coming from a feed. Therefore, SVG text (if that's what you mean, rather than an SVG image) could be tricky. Thanks anyway, I wasn't too confident that there was much could be done here. I appreciate your assistance and time

Hey Folks, A minor issue here that would be nice to resolve but not a major problem otherwise. I often use a pulsing effect on my CTA's in HTML5 banner Ads. However, the CTA text always goes a little blurry while the pulse happens. I've added a Codepen to showcase this issue. I have tried adding `font-smoothing: antialiasing` to the element but it doesn't help. Any ideas or is it even possible to get the text to stay sharp (in focus) while the CTA button is pulsing??

@ZachSaucier Thanks so much... Sorry for the confusion and inability to create a proper codepen. As a newbie, it can be more than a little frustrating trying to get through some of this stuff without having the problem of being unable to properly share your code!! So again, really appreciate it.. that's great ?

Ok @ZachSaucier, I have rewritten the TweenMax.delayedCall() to : .call(pulse, {duration: 0.3}, '+=0.2), and that now works. I have changed the finish() function from document.querySelector("#img-1").style.opacity; gsap.set("#img-1, #logo, #cta, { autoAlpha: 1});

@ZachSaucier Firstly, The use of TweenMax.delayedCall was because I am reusing older code (copy paste). However, that particular piece of code creates a pulsing effect on the CTA button. The delayedCall placed upon it was to stop it from firing immediately when called. It was too quick in the animation, therefore it works (looks) better when there is a slight delay before the pulsing effect. As for your second point about GSAP's .set() method being easier, more convenient to use, I am not sure HOW to use it here so it was never more convenient!! Sorry... Finally, I am not trying to reset the style of elements while they are still animating at all... -> I have an image, let's say a colourful overlay. It fades away and reveals the image beneath it that also has a company logo, some text and a CTA -> The Ad runs for 3 cycles. Overlay fades, image with other elements come to the foreground and then repeat. However, in order to not make the transition back to the original overlay not too quick and keep it consistent with the rest of the animation, I had to add final line: `.to("#overlay-img", {duration: 1, autoAlpha:1},'-=1');` -> Therefore, the final piece of the animation finishes with the Overlay Image showing and this is not what I want. The final frame the Ad finishes with should be the image with logo, text and CTA. So ideally, I would like the animation NOT to play that last line when its the final cycle of the animation.....

This is not very representative. I cannot recreate the whole Ad. This is a poor example and I would like to upload a screengrab showing the actual video but file size will not allow it. This is very frustrating when you cannot actual get any help because sharing examples and code becomes as complex and trying to create the animations in the first place!! https://codepen.io/hermeticpoet/pen/ExyKZvO

I am running a few cycles of an animation for an HTML5 Creative banner. However, the finishing position I need for the banner is not what is happening at the end of the tween / timeline. Therefore, I have set an onComplete function to change the "END" position of my animation but the problem is the delay. Can I add a position parameter to the onComplete function so that it is called half a second or so earlier?? I need the 'finish' function to be called a split second earlier in order to make the animation ending smooth. Example below: var tl = gsap.timeline({ repeat: 1, repeatDelay: 1, onComplete: finish, onCompleteParams: ["-=1"] });

Here is a completely stripped down version of the banner. It only has the image (spritesheet) and its animated effects added.. index.html main.js styles.css

@ZachSaucier Thanks for getting back to me. Unfortunately, I don't have a Pro account in CodePen so cannot upload ANY assets (images, etc,.). Let's says that the blur of the image is not too bad. The real problem part is that the animation (scaling / zooming) effect is shaky, janking on some browsers, particularly on Firefox and IE.. I tried to attach a screengrab video of the creative but its too large to be uploaded here. Sorry for all the messing!!

This is not a complete CodePen as cannot publicly give out that and the assets cannot be loaded but it may give a better understanding of the code being used here: https://codepen.io/hermeticpoet/pen/ZEOQzXJ

Hey, I cannot upload a Code Pen as I don't have Pro and the images being used are part of a current work campaign (HTML5 Creative banner Ads). However, I can post my GSAP3 code. I am consistently having the same issue with images that are zoomed or scaled, whereby Chrome is often 'pretty' good but Firefox & IE are very janky and often blur too. I cannot add the Force3D to the tween as it breaks Safari!! And it doesn't make much noticeable difference in other browsers either. I have added some browser specific CSS rules, such as, `image-rendering: high-quality;` and `will-change: scale;` to assist here but with minimal benefit. This kind of high res image scale and zoom is used a lot in our work but GSAP seems to struggle with its consistency?? Any ideas??? Thanking you all in advance... Kev.. var tl = gsap.timeline({ repeat: 2, repeatDelay: 5 }); tl .fromTo(image1, { x: -30 }, { autoAlpha: 1, x: 0, duration: 1.5 }, '+=0.1') .addLabel('textStart', 0.35) .fromTo(textBg, { x: -170 }, { x: 0, duration: 1, ease: "sine.inOut" }, 'textStart') .fromTo(copy1, { x: -170 }, { x: 0, duration: 0.8, ease: "sine.inOut" }, 'textStart+=0.2') .to(copy1, { autoAlpha: 1, duration: 0.5 }, 'textStart+=0.5') .fromTo(image1, { scale: 1, rotationZ: "0.01" }, { scale: 1.07, duration: 2.3, ease: "expoScale(1, 1.07)", transformOrigin: "50% 50%" }) .to(copy2, { duration: 0.65, autoAlpha: 1 }, '-=1.75') .addLabel('finish', 4.25) .fromTo([wipeTop, wipeBtm], { x: -170 }, { duration: 0.45, x: 0, stagger: 0.05, ease: "sine.inOut" }, 'finish-=0.1') .to(logoWhite, { autoAlpha: 0 }, 'finish+=0.1') .to(logoBlue, { autoAlpha: 1 }, 'finish+=0.1') .fromTo(copy3, { x: - 30 }, { duration: 0.4, x: 0, autoAlpha: 1, ease: "sine.inOut" }, 'finish+=0.2') .fromTo(cta, { x: -30 }, { autoAlpha: 1, x: 0, duration: 0.65, ease: "sine.inOut" }, 'finish+=0.5');