Saturday, September 23, 2023
HomeCSScss - Just how to avoid GSAP typewriting computer animation to surprise...

css – Just how to avoid GSAP typewriting computer animation to surprise up on every line?

I have a typewriter computer animation for a h1 message. This h1 component is focused in a div utilizing screen: table-cell and also vertical-align: center The div itself has screen: table

When my GSAP computer animation discharges up, the elevation of the h1 is tentative; it expands in dimension as the inputting computer animation takes place up until it reaches its last dimension. This creates an issue where you can aesthetically see the message surprise up for each line of message that is composed, such as this:

enter image description here

Like the gif reveals, it startles up for every brand-new line the typewriter creates. I recognize that it is since my message is up and down focused that it reajusts itself like that each time, yet I would certainly like it to be the last dimension from the beginning, so you do not see this shocking taking place. Any type of suggestions?

Right here’s the code for my typewriting computer animation, simply in instance it is required. Additionally I’m brand-new at GSAP, so any kind of comments is valued.

// typewriter computer animation'. arrow', {
period: 1,
opacity: 0,
convenience: "power2.inOut",.
repeat: -1,.
} );.

allow sentence = document.querySelector(". information"). innerHTML;.

allow timelineText = gsap.timeline();.'. message', {
period: 7,.
message: sentence.
} );.

timelineText.delay( 1 );.


Most Popular

Recent Comments