friendlygiraffe

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>

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

Here is a side-by-side comparison. GSAP 3 on the right

Sure here's a version using v2 https://codepen.io/friendlygiraffe/pen/qBKgxJV

Thanks Jack, that's how I've set up the codepen container: hidden then gsap sets to 1 https://codepen.io/friendlygiraffe/pen/KKebjdN

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....

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

Alas, that overlaps too ?

Yes, unfortunately it pushes the letter apart

Thanks again, but the outer stroke needs to be bigger and retain tight kerning

Really appreciate you having a go! But the letters overlap which was my original headache. Thanks though

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

Perhaps I should've posted this in Banner forum, but isn't IE11 still available to Google DCM / Doubleclick studio?

I just tried text-stroke, prefixed, in IE11. No luck for me

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....