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

oh really? I was just going by this https://caniuse.com/text-stroke

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

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:

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 :

It's for a banner, so I didn't want to have to include it

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

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:

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

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

I'd love to use SplitText, but the ad server I'm developing for only like Google hosted JS, hence TextPlugin