Visual-Q

Basically where an object on a 3d layer should be flush against some other element. For instance I had a grid of elements that were flush against one another and I was using a card flip/hover effect that kept introducing spaces similar to your outline problem.

It boggles my mind that they put a man on the moon in less than a decade when the total computing power of North America was probably less than a single iPhone and after twenty some years the biggest tech companies in the world still can't manage to get css to render consistently.

I'm not too familiar with some of the more advanced rendering options but could css will change or perhaps window.requestAnimationFrame() be used to help Chrome render these things better?

Thanks I'll check it out.

Played with this a bit and ended up with a rather bizarre solution. I added an extra 2 pixels to the size of the door then offset it -1px top bottom which fixed the outline issue however Chrome wasn't done messing up yet. At least not on my machine. Another subpixel display anomaly presented as a semitransparent horizontal line across the door at about 75% of the way down that rotated with the animation. So I duplicated the door object over top of itself and it appears to render solid. Inspired by a photoshop trick I use to make semitransparent pixels more opaque, duplicate the layer a few times and flatten them together. Of course to the people who couldn't see the issue to begin with it looks like I did nothing at all.

I can see the lines in Chrome on my mac in both the original and gsap version. They don't appear in Safari or Firefox. They appear and disappear depending on window size, sometimes top bottom sometimes left right sometimes all around. I've seen it before on other '3d' objects in chrome where items need to line up perfectly, it's a real pain. A subpixel rendering issue maybe?

I kind of get it. My thought using slices in an array was to prevent it referencing multiple cases of string combinations and being able to define a group of characters based on position as opposed to a match. It's definitely an edge case usage but it did occur to me there could be instances where grouping characters may be desirable in some cases and undesirable in others within the same text block. I'm not sure if you meant it would be cumbersome to implement or cumbersome to use. You certainly wouldn't want to use it with paragraphs of text as you'd have to count all the characters to find your slices, though you could, I was thinking more along the lines of shorter blocks of text.

I was thinking that as well, chances are with a language like that you would not want animation by character anyway. Of course that's just a guess.

Currently your special character finds character matches, I was thinking you could also define them as an array of slice positions from the original text string. I.e. [[0,7],[12,17],[20,24]] sort of thing. This would allow you to specify any portion(s) of the original text as a grouped object.

Actually it's useful for more than grouping just a few special characters. You can use it to mix characters and words or any particular special string into a split text object to create new types of animation effects as well, without having to target words and characters with separate animations. if possible you could also add the ability to select special characters by string slices then you'd have precise control over exactly what items are grouped into special characters.

I thought about that it's certainly doable. Labour intensive if you had to do a lot of it but it's a solution if you absolutely have to do it.

I guessing you could still do word based animation but the complexity of that alphabet is probably too much for char animation to be practical, maybe that's the solution as well for the original request, reduce it to word animation instead of character animation. Virtually all languages have ligatures but some have rules that are too complex to be used like latin characters. In the Arabic alphabet, historically a cursive derived from the Nabataean alphabet, most letters' shapes depend on whether they are followed (word-initial), preceded (word-final) or both (medial) by other letters. For example, Arabic mīm, isolated م, tripled (mmm, rendering as initial, medial and final): ممم. Notable are the shapes taken by lām + ʼalif isolated: ﻻ, and lām + ʾalif medial or final: ﻼ. Unicode has a special Allah ligature at U+FDF2: ﷲ. https://en.wikipedia.org/wiki/Typographic_ligature

That's a good idea assuming it's workable, and it would put the responsibility on the user to set it up, absolving GSAP of responsibility of specific implementation by language.

Same as I observed, this language/font obviously has rules that create ligatures of character combinations, when split up they lose their context to one another and don't render properly.

Newbie moderator question... how did I claim this topic I have no idea how it works. And how do you unclaim it, I don't see anything in the moderator action about it. UPDATE: And now the claim is turned off obviously I haven't got a clue what's going on.

Typically all the site files, the ones you create, and anything it depends on reside in single directory which would be uploaded to server with the exception of externally referenced files such as files from cdns or other locations. In the event you are not sure about file paths here is an article on w3c: https://www.w3schools.com/html/html_filepaths.asp

First to check the most obvious are your path links correct, is the MorphSVGPlugin.js file in a folder called js in the same directory as the file that is referencing it. and have you intialized the pre dependencies either TweenLite or TweenMax first either locally or from CDN. UPDATE: just to clarify: if you simply put the gsap folder you downloaded into your js folder you would have to find the folder it resides in such as "js/greensock-js-shockingly-green/src/minified/plugins/MorphSVGPlugin.min.js"; NOTE!!! this is just an example of where it resides in one of my projects it is not necessarily the correct path for your setup.

I had a look at it duplicating the original text side by side with split text, not only did it introduce those circle characters but it changed the letterforms of some others. I'm guessing the letterforms of this language may change based on ligature sets built into the font combined with browser rendering problem. Instead of using split text maybe you could animate letterspacing on the raw text item though that wouldn't help with the other effects you're after.

It might be helpfull if we could see the original text before it's been split apart as well. Seeing what the original looks like might help us provide a strategy for solving it. EDIT: Nevermind I see it's in the html section of the pen. I was looking at in browser tools DOH!

You could but you might be better off sticking to css structured after the html unless you have to do it another way. Once you have a working css template for this type of thing it becomes very easy to transfer it from one site to another.

I agree it's harder to read at first but when you start to work with CMS templating systems like Wordpress it's not always desirable to insert classes all over the place as these are highly susceptible to breaking on updates creating maintainability issues. It's also very convenient maintaining styling based on the top level masterclass if you have multiple style sets on similar elements like lists.

I'm not exactly sure what the animation is supposed to do I think it's supposed to do a kind of double blink but I believe the problem is because the timing on your second "blink" is overlapping the first one. The first animation would end at 0.9 but your telling the second to start at 0.75.

I suggest you take this to a Worpress forum. If i'm understanding your request this is a question about passing values from Wordpress to javascript. However, a variation of what you are doing might work, but you'll want to output the script once in the footer not on every ACF repeater field, and with ACF output the desired values as a data attribute on single-number elements such as: <div class="single-number" data = "<?php the_sub_field('ending_number');?>"><?php the_sub_field('starting_number');?></div> not sure about syntax (escaping quotes and such) above but it's approximately what you need to output <div class="single-number" data= "end-value ">100</div> then retrieve end values in your each loop for the counter.

For me the real takeaway from this is don't try to throw it together just before a meeting with a client. I run into dev problems too that sometimes stymie me for a ridiculous amount of time, only to turn out to be something obvious I missed right from the start. Though I guess in this case it was the cdn at fault not your work, things like this can still happen anytime, so it's a lot better to make sure it's ready to show first before setting a meeting.

I can't attest to how finicky it would be to try and get control of touch behaviour having never tried it, but at least it's a potential way of getting control over DOM scroll using GSAP without altering anything in the DOM and compromising other animation and Scroll Majic triggers, if they wish to investigate it.