Streaming live at 10am (PST)

Typed.js timing

#1

Can some amazing soul help me figure out how to figure out how to trigger typed.js either based on scroll position or simply when an element becomes visible?


Here is my public share link: LINK
(how to access public share link)

2 Likes
#2

Hello @FilipSipos

Not sure, but maybe you can use the answer provided here > https://stackoverflow.com/questions/41143769/how-to-trigger-typing-animation-when-a-person-scrolls-beyond-a-certain-point-in

Piter :webflow_heart:

#3

Hi, just animate opacity of that block with JS class

#4

If you google search “how to dedect scroll into view” you get endless examples & stackoverflow Q. In my opnion the best solution is to use waypoints.js (Why? More options like offset, Directions and much more).

Waypoints is the easiest way to trigger a function when you scroll to an element. Official site

offset: 25% - its like saying the element 25% from top of window

How to

1 - include assets (before body)

Do not load jquery (Webflow load jquery for you)

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>

2 - install type.js

Add “stop” function (Otherwise the type will auto play).

<script>
  var options = {
    strings: ["<i>First</i> sentence.", "&amp; a second sentence."],
    loop: true,
    typeSpeed: 50,
  };
  var typed = new Typed("#typed", options);
/* stop typed.js */
 typed.stop();
/* ....rest of the code (see part 3) */

3 - Add waypoints (Full cody copy-paste)

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>

<script>
/* type js options */
var options = {
    strings: ["First sentence.", "Second sentence."],
    loop: true,
    typeSpeed: 50,
  };
/* install type.js*/
  var typed = new Typed("#typed", options);
/* stop type.js*/
  typed.stop();
/* hide type.js cursoer */
  $(".typed-cursor").hide();
/* dedect scroll into view */
  $("#typed").waypoint({
    handler: function() {
      typed.start();
      $(".typed-cursor").show();
    },
    offset: '50%'
  });
</script>

offset - Very usefull:
offset: bottom-in-view; (Like saying: The entire element is in view).
http://imakewebthings.com/waypoints/api/offset-option/#bottom-in-view

http://new-landing-page-94e5db.webflow.io/type-js

bugs:
If you put this code and the text above fold + offset is 50% (but by deafult the element is 10% from the top) - the code “get crazy”. Sorry, i dont have time to create elegant solution. Anyway

webflow site tree

Only remember to add #id to some span named typed

-or- No way to create empty span on webflow - embed html is also an option:

Codepen:


Another codepen i made ± same idea (Run anime.js on scroll into view). Very cool libary:

1 Like
#5

Thank you so much for the help all of you, I will keep working on it tomorrow and will post an update.

1 Like