Interactive Conversation Style with Animated Speech Bubbles

Interactive Conversation Style with Animated Speech Bubbles

On this page:

Speech Bubble Animation

RODDYRODDY

This is a sample of an animated speech bubble.

Speech Bubbles Appearing from Left and Right

RODDYRODDY

As you scroll, the speech bubble appears from the right with animation. Just set class="animate-on-scroll from-right".

CLARECLARE

Wow! Mine appears from the left, right? Set class="animate-on-scroll from-left".

Speech Bubbles Appearing from Bottom and Back

BARTSBARTS

Mine appears from the bottom. Use class="animate-on-scroll from-bottom".

MAKIMAKI

I like this one! It appears from the back and grows bigger towards the front. Use class="animate-on-scroll scale-up".

Non-Repeating Animations

RODDYRODDY

After disappearing from the screen once, it repeats the same animation.

CLARECLARE

Preventing the animation from repeating is simple! Just add class="animate-on-scroll from-left once", adding "once" prevents repetition.

MAKIMAKI

It's convenient to visually highlight the message you want to convey.

BARTSBARTS

Alright! I'm going to give it a try too!


See the Pen Untitled by 5oji (@udagawa) on CodePen.