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:
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
gsap.to('. arrow', {
period: 1,
opacity: 0,
convenience: "power2.inOut",.
repeat: -1,.
} );.
allow sentence = document.querySelector(". information"). innerHTML;.
allow timelineText = gsap.timeline();.
timelineText.to('. message', {
period: 7,.
message: sentence.
} );.
timelineText.delay( 1 );.
