Can I create a typing effect

advanced-prototyping

#1

Recently I saw different websites that use a typing effect – e.g. this one in the headline.
Kalium – Creative Theme for Professionals

I was wondering if I could reproduce this with axure and probably a little js.


#2

Hello pit piano,
Yes you can create typing effect using dynamic panel
Just follow the steps given bellow:
1 Create DP( Dynamic Panel ) With required word.
2 set number of states equals to number of letters of that word
3 In first state type first letter and then underline for second letter
4 second state type first two letter and then underline for third letter …repeat the same for all
5 last state with complete word
6 use page interaction > on page load > Set panel state to NEXT with wrap option last to first
7 Repeat after every 100sec
8 publish



#3

Here’s a more dynamic way to do it. Just change the text in the box and it’ll work with anything. You can change the speed by changing the wait time in the onmove event. Make sure you import global variables if you want to use it in your project.

Untitled Document
typeEffect.rp (103 KB)


#4

+1 for Matei’s method. Easy to work with and very clean.


#5

here is another approach
typeEffect_1.rp (102 KB)


#6

sweet, guys! thanks a lot for your help.


#7

Thanks Matei - that was exactly what I needed!


#8

HI @matei1987,

Thanks for the clean example. I’ve already started using in my projects,

I’m struggling with introducing a second block of text.
Do I have to create other variables in order to make the second block of text work?

Could you show us how this would work with a separate second block of text?

This is what I tried to do.
typeEffect_test.rp (115.5 KB)

Chers!


#9

Never mind @matei1987 I sorted it out.
Cheers!


#10

hey for some reason i cant recreate this in RP8. any tips?