Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

96
Views
Text wrapping not animating smoothly

I'm using CSS to create animations for my website. When the home page loads, I want the my name and an image to slide in from the side, "my name" appearing from the left, and an image appearing from the right. My problem now is, if the screen is just small enough for "my name" to wrap, then when the animations begins it first doesn't wrap but when it ends the text wraps, leaving behind a sudden transition of the "my name". This video should explain it better

So my question is how can I make the overall animation smooth even if the text has to be wraped?

This is the following CSS animation that I'm using:

@keyframes slideToLeft {
  
  from {
    margin-left: 100%;
  }
  to {
      margin-left: 0%;
  }
}
@keyframes slideToRight {

  from {
    margin-left: -100%;
}
  to {
    margin-left: 0%;
  }
}
7 months ago · Juan Pablo Isaza
2 answers
Answer question

0

For Simple Animation you need to use : Animate On Scroll Library.

Link for Example : AOS

7 months ago · Juan Pablo Isaza Report

0

You have to give the text width (like 100vw) so that the text stay wrap when animation starts.

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs