Text flip animation

[Afplaktape]

I'm trying to achieve this text effect: https://gifyu.com/image/S6eV2 

But I'm not really sure where to start... Is there anyone who could point me in the right direction? Thanks:)

See the Pen poGvKKo by Afplaktape (@Afplaktape) on CodePen

[mvaneijgen]

Hey @Afplaktape

 

What I would do is create all your text elements (you could do this with JS, I've just add them in the HTML) and then stack them on top of each other. I've add some CSS and some JS to your setup. Next you probably want to seamless loop the element, check the videos below!

 

Hoop dat het helpt en veel geluk!

 

See the Pen QWYwBKy?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Here are two tutorials that that really explain the concept really well (by our own @Carl)

 

https://www.youtube.com/watch?v=0DSkgXNFZHs
https://www.youtube.com/watch?v=Tq0BdNtK0Ro

[Afplaktape]

Thanks this helps a lot!! Super bedankt!:)

[Afplaktape]

I tried following the tutorial as good as possible.

 

The words loop seamlessly now but I'm not able to influence the  amount of time the words are being visible... What am I doing wrong here?

See the Pen poGvZWR by Afplaktape (@Afplaktape) on CodePen

[mvaneijgen]

You where missing the pause variable and something else, I've copied the logic from the tutorial and now it seems to work.

 

See the Pen poGvGBJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen