Jump to content
Search Community

friendlygiraffe

Members
  • Posts

    271
  • Joined

  • Last visited

Everything posted by friendlygiraffe

  1. In case anyone else needs a google-hosted version, as I did. The next previous version I could find was this one: <script src="https://s0.2mdn.net/ads/studio/cached_libs/gsap_3.8.0_min.js"></script>
  2. For reference: GSAP3: https://codepen.io/friendlygiraffe/pen/KKebjdN GSAP2: https://codepen.io/friendlygiraffe/pen/qBKgxJV If you keep refreshing on GSAP 3 you will see the glitch, whereas GSAP 2 will not
  3. Here is a side-by-side comparison. GSAP 3 on the right
  4. Sure here's a version using v2 https://codepen.io/friendlygiraffe/pen/qBKgxJV
  5. Thanks Jack, that's how I've set up the codepen container: hidden then gsap sets to 1 https://codepen.io/friendlygiraffe/pen/KKebjdN
  6. Thanks for this! Unfortunately I won't get away with using delay for this project The only other way I can maybe fix it is by reverting to the old V2 TweenMax syntax ... will try that now edit: Yup! v2 works now....
  7. This is odd, I get this strange bug: var mainTL = gsap.timeline(); mainTL.from(".text2", {duration: 0.5, x:"+=80px", autoAlpha:0, ease:"power4.out"}, 0.5) .from(".phone", {duration: 1, scale:0.7, x:"+=250px", y:"+=400px", ease:"power2.inOut"}, 0.5); I discovered it only happens when both the items start at 0.5. So If I change the code for one of them to 0.6 it's fine: mainTL.from(".text2", {duration: 0.5, x:"+=80px", autoAlpha:0, ease:"power4.out"}, 0.5) .from(".phone", {duration: 1, scale:0.7, x:"+=250px", y:"+=400px", ease:"power2.inOut"}, 0.6); I've created gifs, as the codepen doesn't produce errors. Any tips appreciated
  8. Yes, unfortunately it pushes the letter apart
  9. Thanks again, but the outer stroke needs to be bigger and retain tight kerning
  10. Really appreciate you having a go! But the letters overlap which was my original headache. Thanks though
  11. I went down the -text-stroke route, even though it is experimental, but doesn't seem to like strokes on the outside of text. However, I found a trick using pseudo-elements: https://codepen.io/friendlygiraffe/pen/MWVQGoN My question now is, can SplitText handle this method? Looks like it isn't a good approach
  12. Perhaps I should've posted this in Banner forum, but isn't IE11 still available to Google DCM / Doubleclick studio?
  13. I just tried text-stroke, prefixed, in IE11. No luck for me
  14. I found a pretty good way of doing it by duplicating the text into 2 layers: https://codepen.io/friendlygiraffe/pen/ExEQvmK Separate question really, but I would like to run split1 and split2 on one line of code. I tried [split1.chars, split2.chars] but it ran them one after the other....
  15. oh really? I was just going by this https://caniuse.com/text-stroke
  16. I'm looking for a reliable way to stroke text, without using text-stroke, because it's not cross-browser: https://codepen.io/friendlygiraffe/pen/mdxXwXO I found this thread from nearly 10 years ago, but it seems nothing much has moved on since then Is there anything else I can try? I'm tried to use Daniel Riemer's text-shadow hack: text-shadow hack which is great, but not for overlapping letters Thanks
  17. Thanks a lot, but that still accelerates, I don't want an y acceleration, only deceleration towards the end. here's more what I mean:
  18. this very cool, good to know for future, but not quite right - the green line needs to be straight, up until the last say 10% of the duration :
  19. It's for a banner, so I didn't want to have to include it
  20. Is there simple way to create a linear.none ease but with a slight deceleration in the last 10%? Something like this: Without CustomEase plugin ideally
  21. var split = new SplitText("#Headline_Copy", {type: "chars,words" , position:"absolute"}); I had a look through the docs and tried setting position:"absolute" , which amazingly fixes it in IE11, but ruins it in everything else:
  22. Thanks for replying. I'm sure it is an IE problem (Please when will they delete that thing), but the gap underneath appears to be the same size as a line of text , at least when I set the split to 'words'. Which makes me think there's might be a trick in gsap I've overlooked? Any ideas at all appreciated
  23. Finally got round to using SplitText, but I am having a weird bug in IE11. This is how the text looks like without initialising SplitText: This is what happens after I add SplitText, as you can see there is a gap underneath: It works fine in all other browsers, any clues? CodePen attached
  24. I'd love to use SplitText, but the ad server I'm developing for only like Google hosted JS, hence TextPlugin
×
×
  • Create New...