Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

kevywalton's Achievements

  1. @Carl Thanks, I really appreciate it. That's make sense and its nice and concise. 😇
  2. 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
  3. 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?
  4. 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" }, '<')
  5. Sorry, I've done a bit of testing on this and it works great with a dynamic variable. I'll close this ticket...
  6. 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
  7. 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..
  8. 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..
  9. @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 😇 😊
  10. 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
  11. 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??
  12. @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 😇
  13. 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});
  14. @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.....