Typed.js timing

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

Hello @FilipSipos

Not sure, but maybe you can use the answer provided here > How to trigger typing animation when a person scrolls beyond a certain point in JQuery - Stack Overflow

Piter :webflow_heart:

Hi, just animate opacity of that block with JS class

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

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

1 Like

Hi, I am trying to get this solution to work without any luck.

Here is my script:

    <script>
 var typed = new Typed(".typed-2", {
  strings: ["Turnpike has partnered with Microsoft and is using IoT Hub to combine the physical and the digital world. This empowers frontline workers to focus on service rather than technology, turning all the intelligence into action"],
  typeSpeed: 10,
  backSpeed: 50,
  backDelay: 800,
  startDelay: 500,
  loop: false,
  showCursor: false,
  cursorChar: "|",
  attr: null,
});

/* stop type.js*/
  typed.stop();
/* hide type.js cursoer */
  $(".typed-cursor").hide();
  
/* dedect scroll into view */
  $("#typedz").waypoint({
    handler: function() {
      typed.start();
      $(".typed-cursor").show();
    },
    offset: '50%'
  });

</script>

I’ve added the ID typedz to the div where the text is within.

Link to site: https://turnpike-bbc6de.webflow.io/

Thanks

Add more details - what not working (Where)? (homepage#hero section works fine).

Sorry for not clarifing. It’s the quote section!