I believe that doing the work this way would still JS to calculate the positions and construct the CSS animator (unless of course you hardcode understanding of every letter’s beginning position). But you might start having a pure-CSS version which includes the jumpy acceleration you dislike, with JS then switching within the remedied version, in order that it still “works” but less easily inside a pure CSS world.
After posting my prior comment I grokked a few of the problems with the pure CSS approach, however i think Used to do learn how to get *something* in pure CSS for if JS isn’t open to calculate smooth keyframes.
Create two animations Body is applicable to span.flyin and something to span.marquee. Wrap each letter in X. Set the animation-delay around the marquee animation towards the time period of the flyin animation. To prevent the letters all coming at the beginning of the marquee at the very same moment, the time period of the flyin (and delay from the marquee) ought to be staggered. This may be completed with an unpleasant repetitive stylesheet
but I’ve no clue how good that’s supported in browsers, and entering two data-num characteristics within the html for every letter is just a tiny bit less annoying than entering two lines within the stylesheet on their behalf
You nerd-sniped me pretty bad with this particular one! I believe There is a theoretical pure CSS technique that will get 90% of how towards the result you would like, but there appears to become just one bit that’s impossible without JS.
First, place a span around each letter that runs the marquee animator, having a delay modified to offset each letter right point on the way. The pathways for that letter shape are expressed in rates from the bounding box from the letter. The span is placed to show:prevent, position:absolute.
Wrapped that in another span with display:block, position:relative that’s initially styled to 0x0 pixels, therefore the marquee animation is getting no effect because it’s animating rates of zero. The letters still appear because overflow:visible may be the default. This block will get an animation that takes over when the flyin has already been going ahead, scaling itself to the right size for that big letter in an exceedingly smooth curve.
The following container has position: absolute and will get the positioning area of the flyin animation, also utilizing a smooth curve.
To make certain the whole factor still functions just like a letter for reasons of initial layout, it requires another wrapper around it – that one inline-block and position relative again. Along with the things formerly pointed out, this consists of a span with similar letter but styled to visibility:hidden so the correct amount of space for that letter is reserved within the primary layout despite the actual letter has traveled away.
(I figured it may be possible use ::first-line and ::first-letter to ensure that less nested elements are essential, but it appears as though the qualities they support are extremely limited).
The only real part I can’t observe how to complete in CSS: the eventual position from the big letters must be when it comes to position:fixed or absolute-relative-to-the-page-as-a-whole, however the elements to become moved have to start at coordinates in accordance with their actual position within the layout. CSS appears to possess not a way to animate easily between position:absolute/relative coordinates and position:fixed ones, and that i can’t use whatever clever method to combine nested elements in numerous coordinate systems to accomplish this area of the effect.