We Keep Coding

How do I use a single IntersectionObserver to perform unique callbacks per observed element?

I need to know out when dozens of HTMLElements are inside or outside of the viewport when scrolling down the page. So I'm using the IntersectionObserver API to create several instances of a VisibilityHelper class, each one with its own IntersectionObserver. With this helper class, I can detect when any HTMLElement is 50% visible or hidden:
Working demo:
// Create helper class
class VisibilityHelper {
constructor(htmlElem, hiddenCallback, visibleCallback) {
this.observer = new IntersectionObserver((entities) => {
const ratio = entities[0].intersectionRatio;
if (ratio <= 0.0) {
hiddenCallback();
} else if (ratio >= 0.5) {
visibleCallback();
}
}, {threshold: [0.0, 0.5]});
this.observer.observe(htmlElem);
}
}
// Get elements
const headerElem = document.getElementById("header");
const footerElem = document.getElementById("footer");
// Use helper class to know whether visible or hidden
const headerViz = new VisibilityHelper(
headerElem,
() => {console.log('header is hidden')},
() => {console.log('header is visible')},
);
const footerViz = new VisibilityHelper(
footerElem,
() => {console.log('footer is hidden')},
() => {console.log('footer is visible')},
);
#page {
width: 100%;
height: 1500px;
position: relative;
background: linear-gradient(#000, #fff);
}
#header {
position: absolute;
top: 0;
width: 100%;
height: 100px;
background: #f90;
text-align: center;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: #09f;
text-align: center;
}
<div id="page">
<div id="header">
Header
</div>
<div id="footer">
Footer
</div>
</div>
The problem is that my demo above creates one IntersectionObserver for each HTMLElement that needs to be watched. I need to use this on 100 elements, and this question indicates that we should only use one IntersectionObserver per page for performance reasons. Secondly, the API also suggests that one observer can be used to watch several elements, since the callback will give you a list of entries.
How would you use a single IntersectionObserver to watch multiple htmlElements and trigger unique hidden/visible callbacks for each element?

You can define a callback mapping between your target elements and their visibility state. Then inside of your IntersectionObserver callback, use the IntersectionObserverEntry.target to read the id and invoke the associated callback from the map based on the visibility state of visible or hidden.
Here is a simplified approach based on your example. The gist of the approach is defining the callbacks map and reading the target from the IntersectionObserverEntry:
// Create helper class
class VisibilityHelper {
constructor(htmlElems, callbacks) {
this.callbacks = callbacks;
this.observer = new IntersectionObserver(
(entities) => {
const ratio = entities[0].intersectionRatio;
const target = entities[0].target;
if (ratio <= 0.0) {
this.callbacks[target.id].hidden();
} else if (ratio >= 0.5) {
this.callbacks[target.id].visible();
}
},
{ threshold: [0.0, 0.5] }
);
htmlElems.forEach((elem) => this.observer.observe(elem));
}
}
// Get elements
const headerElem = document.getElementById("header");
const footerElem = document.getElementById("footer");
// Use helper class to know whether visible or hidden
const helper = new VisibilityHelper([headerElem, footerElem], {
header: {
visible: () => console.log("header is visible"),
hidden: () => console.log("header is hidden"),
},
footer: {
visible: () => console.log("footer is visible"),
hidden: () => console.log("footer is hidden"),
},
});
#page {
width: 100%;
height: 1500px;
position: relative;
background: linear-gradient(#000, #fff);
}
#header {
position: absolute;
top: 0;
width: 100%;
height: 100px;
background: #f90;
text-align: center;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: #09f;
text-align: center;
}
<div id="page">
<div id="header">
Header
</div>
<div id="footer">
Footer
</div>
</div>
You can use a similar approach if you want to loop over the entire array of entities instead of just considering the first entities[0].

CSS Scroll Snap Points with navigation (next, previous) buttons

I am building a carousel, very minimalist, using CSS snap points. It is important for me to have CSS only options, but I'm fine with enhancing a bit with javascript (no framework).
I am trying to add previous and next buttons to scroll programmatically to the next or previous element. If javascript is disabled, buttons will be hidden and carousel still functionnal.
My issue is about how to trigger the scroll to the next snap point ?
All items have different size, and most solution I found require pixel value (like scrollBy used in the exemple). A scrollBy 40px works for page 2, but not for others since they are too big (size based on viewport).
function goPrecious() {
document.getElementById('container').scrollBy({
top: -40,
behavior: 'smooth'
});
}
function goNext() {
document.getElementById('container').scrollBy({
top: 40,
behavior: 'smooth'
});
}
#container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
border: 2px solid var(--gs0);
border-radius: 8px;
height: 60vh;
}
#container div {
scroll-snap-align: start;
display: flex;
justify-content: center;
align-items: center;
font-size: 4rem;
}
#container div:nth-child(1) {
background: hotpink;
color: white;
height: 50vh;
}
#container div:nth-child(2) {
background: azure;
height: 40vh;
}
#container div:nth-child(3) {
background: blanchedalmond;
height: 60vh;
}
#container div:nth-child(4) {
background: lightcoral;
color: white;
height: 40vh;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<button onClick="goPrecious()">previous</button>
<button onClick="goNext()">next</button>

Nice question! I took this as a challenge.
So, I increased JavaScript for it to work dynamically. Follow my detailed solution (in the end the complete code):
First, add position: relative to the .container, because it need to be reference for scroll and height checkings inside .container.
Then, let's create 3 global auxiliary variables:
1) One to get items scroll positions (top and bottom) as arrays into an array. Example: [[0, 125], [125, 280], [280, 360]] (3 items in this case).
3) One that stores half of .container height (it will be useful later).
2) Another one to store the item index for scroll position
var carouselPositions;
var halfContainer;
var currentItem;
Now, a function called getCarouselPositions that creates the array with items positions (stored in carouselPositions) and calculates the half of .container (stored in halfContainer):
function getCarouselPositions() {
carouselPositions = [];
document.querySelectorAll('#container div').forEach(function(div) {
carouselPositions.push([div.offsetTop, div.offsetTop + div.offsetHeight]); // add to array the positions information
})
halfContainer = document.querySelector('#container').offsetHeight/2;
}
getCarouselPositions(); // call it once
Let's replace the functions on buttons. Now, when you click on them, the same function will be called, but with "next" or "previous" argument:
<button onClick="goCarousel('previous')">previous</button>
<button onClick="goCarousel('next')">next</button>
Here is about the goCarousel function itself:
First, it creates 2 variables that store top scroll position and bottom scroll position of carousel.
Then, there are 2 conditionals to see if the current carousel position is on most top or most bottom.
If it's on top and clicked "next" button, it will go to the second item position. If it's on bottom and clicked "previous" button, it will go the previous one before the last item.
If both conditionals failed, it means the current item is not the first or the last one. So, it checks to see what is the current position, calculating using the half of the container in a loop with the array of positions to see what item is showing. Then, it combines with "previous" or "next" checking to set the correct next position for currentItem variable.
Finally, it goes to the correct position through scrollTo using currentItem new value.
Below, the complete code:
var carouselPositions;
var halfContainer;
var currentItem;
function getCarouselPositions() {
carouselPositions = [];
document.querySelectorAll('#container div').forEach(function(div) {
carouselPositions.push([div.offsetTop, div.offsetTop + div.offsetHeight]); // add to array the positions information
})
halfContainer = document.querySelector('#container').offsetHeight/2;
}
getCarouselPositions(); // call it once
function goCarousel(direction) {
var currentScrollTop = document.querySelector('#container').scrollTop;
var currentScrollBottom = currentScrollTop + document.querySelector('#container').offsetHeight;
if (currentScrollTop === 0 && direction === 'next') {
currentItem = 1;
} else if (currentScrollBottom === document.querySelector('#container').scrollHeight && direction === 'previous') {
console.log('here')
currentItem = carouselPositions.length - 2;
} else {
var currentMiddlePosition = currentScrollTop + halfContainer;
for (var i = 0; i < carouselPositions.length; i++) {
if (currentMiddlePosition > carouselPositions[i][0] && currentMiddlePosition < carouselPositions[i][1]) {
currentItem = i;
if (direction === 'next') {
currentItem++;
} else if (direction === 'previous') {
currentItem--
}
}
}
}
document.getElementById('container').scrollTo({
top: carouselPositions[currentItem][0],
behavior: 'smooth'
});
}
window.addEventListener('resize', getCarouselPositions);
#container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
border: 2px solid var(--gs0);
border-radius: 8px;
height: 60vh;
position: relative;
}
#container div {
scroll-snap-align: start;
display: flex;
justify-content: center;
align-items: center;
font-size: 4rem;
}
#container div:nth-child(1) {
background: hotpink;
color: white;
height: 50vh;
}
#container div:nth-child(2) {
background: azure;
height: 40vh;
}
#container div:nth-child(3) {
background: blanchedalmond;
height: 60vh;
}
#container div:nth-child(4) {
background: lightcoral;
color: white;
height: 40vh;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<button onClick="goCarousel('previous')">previous</button>
<button onClick="goCarousel('next')">next</button>
Another good detail to add is to call getCarouselPositions function again if the window resizes:
window.addEventListener('resize', getCarouselPositions);
That's it.
That was cool to do. I hope it can help somehow.

I've just done something similar recently. The idea is to use IntersectionObserver to keep track of which item is in view currently and then hook up the previous/next buttons to event handler calling Element.scrollIntoView().
Anyway, Safari does not currently support scroll behavior options. So you might want to polyfill it on demand with polyfill.app service.
let activeIndex = 0;
const container = document.querySelector("#container");
const elements = [...document.querySelectorAll("#container div")];
function handleIntersect(entries){
const entry = entries.find(e => e.isIntersecting);
if (entry) {
const index = elements.findIndex(
e => e === entry.target
);
activeIndex = index;
}
}
const observer = new IntersectionObserver(handleIntersect, {
root: container,
rootMargin: "0px",
threshold: 0.75
});
elements.forEach(el => {
observer.observe(el);
});
function goPrevious() {
if(activeIndex > 0) {
elements[activeIndex - 1].scrollIntoView({
behavior: 'smooth'
})
}
}
function goNext() {
if(activeIndex < elements.length - 1) {
elements[activeIndex + 1].scrollIntoView({
behavior: 'smooth'
})
}
}
#container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
border: 2px solid var(--gs0);
border-radius: 8px;
height: 60vh;
}
#container div {
scroll-snap-align: start;
display: flex;
justify-content: center;
align-items: center;
font-size: 4rem;
}
#container div:nth-child(1) {
background: hotpink;
color: white;
height: 50vh;
}
#container div:nth-child(2) {
background: azure;
height: 40vh;
}
#container div:nth-child(3) {
background: blanchedalmond;
height: 60vh;
}
#container div:nth-child(4) {
background: lightcoral;
color: white;
height: 40vh;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<button onClick="goPrevious()">previous</button>
<button onClick="goNext()">next</button>

An easier approach done with react.
export const AppCarousel = props => {
const containerRef = useRef(null);
const carouselRef = useRef(null);
const [state, setState] = useState({
scroller: null,
itemWidth: 0,
isPrevHidden: true,
isNextHidden: false
})
const next = () => {
state.scroller.scrollBy({left: state.itemWidth * 3, top: 0, behavior: 'smooth'});
// Hide if is the last item
setState({...state, isNextHidden: true, isPrevHidden: false});
}
const prev = () => {
state.scroller.scrollBy({left: -state.itemWidth * 3, top: 0, behavior: 'smooth'});
setState({...state, isNextHidden: false, isPrevHidden: true});
// Hide if is the last item
// Show remaining
}
useEffect(() => {
const items = containerRef.current.childNodes;
const scroller = containerRef.current;
const itemWidth = containerRef.current.firstElementChild?.clientWidth;
setState({...state, scroller, itemWidth});
return () => {
}
},[props.items])
return (<div className="app-carousel" ref={carouselRef}>
<div className="carousel-items shop-products products-swiper" ref={containerRef}>
{props.children}
</div>
<div className="app-carousel--navigation">
<button className="btn prev" onClick={e => prev()} hidden={state.isPrevHidden}><</button>
<button className="btn next" onClick={e => next()} hidden={state.isNextHidden}>></button>
</div>
</div>)
}

I was struggling with the too while working with a react project and came up with this solution. Here's a super basic example of the code using react and styled-components.
import React, { useState, useRef } from 'react';
import styled from 'styled-components';
const App = () => {
const ref = useRef();
const [scrollX, setScrollX] = useState(0);
const scrollSideways = (px) => {
ref.current.scrollTo({
top: 0,
left: scrollX + px,
behavior: 'smooth'
});
setScrollX(scrollX + px);
};
return (
<div>
<List ref={ref}>
<ListItem color="red">Card 1</ListItem>
<ListItem color="blue">Card 2</ListItem>
<ListItem color="green">Card 3</ListItem>
<ListItem color="yellow">Card 4</ListItem>
</List>
<button onClick={() => scrollSideways(-600)}> Left </button>
<button onClick={() => scrollSideways(600)}> Right </button>
</div>
);
};
const List = styled.ul`
display: flex;
overflow-x: auto;
padding-inline-start: 40px;
scroll-snap-type: x mandatory;
list-style: none;
padding: 40px;
width: 700px;
`;
const ListItem = styled.li`
display: flex;
flex-shrink: 0;
scroll-snap-align: start;
background: ${(p) => p.color};
width: 600px;
margin-left: 15px;
height: 200px;
`;

Splitting boxes to 50% height of their parent

I would like to split the active items to 50% height of their parent element. So when I open the first two items, they should split to 50% of their parent class .items (both .item have 100px). So I can see both without scrolling. Also when I open all three of them, they should get the height of 100px, which is the half of their parent. My problem is, tha the second item overlaps and I have to scroll. Whats wrong?
angular.module("myApp", []).controller("myController", function($scope) {
$scope.itemList = [{
id: 1,
name: "Item 1",
isOpen: false
}, {
id: 2,
name: "Item 2",
isOpen: false
}, {
id: 3,
name: "Item 3",
isOpen: false
}];
$scope.setHeight = function() {
if ($scope.itemList.length > 1) {
var typeHeaderHeight = $('.item-header').outerHeight();
var halfHeight = Math.round($('.items').outerHeight() / 2);
setTimeout(() => {
$('.item').css('height', typeHeaderHeight);
$('.item.active').css('height', halfHeight);
});
}
}
});
.frame {
display: flex;
flex-direction: column;
height: 200px;
}
.items {
display: flex;
flex: 1 1 auto;
flex-direction: column;
overflow: auto;
border: 1px solid black;
}
.item {
display: flex;
flex-direction: column;
flex: 0 0 auto;
margin-bottom: 5px;
background-color: rgb(150, 150, 150);
color: white;
}
.item:hover {
cursor: pointer;
}
.item-header {
position: relative;
display: flex;
}
.active {
background-color: rgb(220, 220, 220);
color: rgb(150, 150, 150);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="frame" ng-app="myApp" ng-controller="myController">
<div class="items">
<div class="item" ng-repeat="item in itemList" ng-click="item.isOpen = !item.isOpen; setHeight()" ng-class="{active: item.isOpen}">
<div class="item-header">
{{item.name}}
</div>
</div>
</div>
</div>

The issue is that you are setting the values of typeHeaderHeight and halfHeight variables outside the timeout so it always calculated before the item is actually opened so there is mistake in the calculations
try to make it like
setTimeout(() => {
var typeHeaderHeight = $('.item-header').outerHeight();
var halfHeight = Math.round($('.items').outerHeight() / 2);
$('.item').css('height', typeHeaderHeight);
$('.item.active').css('height', halfHeight);
});
},500)
One more thing .. I don't recommend to use setTimeout of vanilla JavaScript try to use $timeout instead of it

How to control md-select drop down position in Angular Material

I need to customize a md-select so that the option list acts more like a traditional select. The options should show up below the select element instead of hovering over top of the element. Does anyone know of something like this that exists, or how to accomplish this?

This applies to Material for Angular 2+
Use disableOptionCentering option, such as:
<mat-select disableOptionCentering>
<mat-option *ngFor="let movie of movies" [value]="movie.value">
{{ movie.viewValue }}
</mat-option>
</mat-select>

Here you go - CodePen
Use the md-container-class attribute. From the docs:
Markup
<div ng-controller="AppCtrl" class="md-padding" ng-cloak="" ng-app="MyApp">
<md-input-container>
<label>Favorite Number</label>
<md-select ng-model="myModel" md-container-class="mySelect">
<md-option ng-value="myVal" ng-repeat="myVal in values">{{myVal.val}}</md-option>
</md-select>
</md-input-container>
</div>
CSS
.mySelect md-select-menu {
margin-top: 45px;
}
JS
(function () {
'use strict';
angular
.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope) {
$scope.required = "required";
$scope.values = [
{val:1, des: 'One'},
{val:2, des: 'Two'}
];
});
})();

Hi maybe try something like this:
$('.dropdown-button2').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: ($('.dropdown-content').width()*3)/2.5 + 5, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left' // Displays dropdown with edge aligned to the left of button
}
);
https://jsfiddle.net/fb0c6b5b/
One post seems have the same issue: How can I make the submenu in the MaterializeCSS dropdown?

To people who has cdk-overlay (cdk-panel) with md-select.
Suppose that you use Angular 2, Typescript, Pug and Material Design Lite (MDL) in working environment.
Function which styles md-select works on click.
Javascript (TypeScript) in component
#Component({
selector: ..,
templateUrl: ..,
styleUrl: ..,
// For re-calculating on resize
host: { '(window:resize)': 'onResize()' }
})
export class MyComponent {
//Function to style md-select BEGIN
public styleSelectDropdown(event) {
var bodyRect = document.body.getBoundingClientRect();
let dropdown = document.getElementsByClassName("cdk-overlay-pane") as HTMLCollectionOf<HTMLElement>;
if (dropdown.length > 0) {
for(var i = 0; i < dropdown.length; i++) {
dropdown[i].style.top = "auto";
dropdown[i].style.bottom = "auto";
dropdown[i].style.left = "auto";
}
for(var i = 0; i < dropdown.length; i++) {
if (dropdown[i].innerHTML != "") {
var getDropdownId = dropdown[i].id;
document.getElementById(getDropdownId).classList.add('pane-styleSelectDropdown');
}
}
}
let target = event.currentTarget;
let selectLine = target.getElementsByClassName("mat-select-underline") as HTMLCollectionOf<HTMLElement>;
if (selectLine.length > 0) {
var selectLineRect = selectLine[0].getBoundingClientRect();
}
let targetPanel = target.getElementsByClassName("mat-select-content") as HTMLCollectionOf<HTMLElement>;
if (targetPanel.length > 0) {
var selectLineRect = selectLine[0].getBoundingClientRect();
}
if (dropdown.length > 0) {
for(var i = 0; i < dropdown.length; i++) {
dropdown[i].style.top = selectLineRect.top + "px";
dropdown[i].style.bottom = 0 + "px";
dropdown[i].style.left = selectLineRect.left + "px";
}
}
var windowHeight = window.outerHeight;
if (targetPanel.length > 0) {
targetPanel[0].style.maxHeight = window.outerHeight - selectLineRect.top + "px";
}
}
public onResize() {
this.styleSelectDropdown(event);
}
//Function to style md-select END
}
HTML (Pug)
.form-container
div.styleSelectDropdown((click)="styleSelectDropdown($event)")
md-select.form-group(md-container-class="my-container", id = '...',
md-option(....)
CSS which overrides Material Design Lite (MDL) css
.pane-styleSelectDropdown .mat-select-panel {
border: none;
min-width: initial !important;
box-shadow: none !important;
border-top: 2px #3f51b5 solid !important;
position: relative;
overflow: visible !important;
}
.pane-styleSelectDropdown .mat-select-panel::before {
content: "";
position: absolute;
top: -17px;
right: 0;
display: block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #3f51b5;
margin: 0 4px;
z-index: 1000;
}
.pane-styleSelectDropdown .mat-select-content {
border: 1px solid #e0e0e0;
box-shadow: 0 2px 1px #e0e0e0;
position: relative;
}
#media screen and (max-height: 568px) {
.pane-styleSelectDropdown .mat-select-content {
overflow-y: scroll;
}
}
.pane-styleSelectDropdown.cdk-overlay-pane {
top: 0;
bottom: 0;
left: 0;
overflow: hidden;
padding-bottom: 5px;
z-index: 10000;
}
.pane-styleSelectDropdown .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple),
.pane-styleSelectDropdown .mat-option:focus:not(.mat-option-disabled),
.pane-styleSelectDropdown .mat-option:hover:not(.mat-option-disabled) {
background: #fff !important;
}
.pane-styleSelectDropdown .mat-option {
line-height: 36px;
height: 36px;
font-size: 14px;
}

So this turned out to be something I had to do with Javascript and setTimeout, as ugly as the solution is. You can't effectively do this with CSS only as material design uses javascript positioning of the drop down. As a result I had to attach a function to the popup opening inside there I set a 200ms timeout that calculates the desired position of the drop down on the screen and moves it there. I also attached a function in the controller to a window resize event so it will move with a resize.
Ultimately you have to use a timeout to get material design time to do it's javascript based move of the popover and then move it yourself. I also uses a trick to hide it while the moving is taking place so the user doesn't see the jump. That's the description of what I had to do just in case someone else attempts similar.

You must override "top" of the CSS class ".md-select-menu-container".
To do so, you have to use the attribute md-container-class like:
md-container-class="dropDown"
inside the md-select tag. then you just have to create a custom css for the class declared:
.md-select-menu-container.dropDown{
top: 147px !important;
}
!important is the key here! top is the value you want... in this case 147px.
here's a CodePen

Animation within animation

I have animation that works like this:
var words_array = [];
words_array[0] = ['FUN', 'CREATIVE', 'INNOVATIVE'];
words_array[1] = ['WEB', 'WORLD'];
var words = ['We are <span class="words" style="background:#F33B65; font-weight:bold; padding: 0 10px;">FUN</span>',
'We like the <span class="words" style="background:#8be32d; font-weight:bold; padding: 0 10px;">WEB</span>'
];
$('#caption').html(words[0]);
var i = 0;
setInterval(function() {
$('#caption').animate({
width: 'toggle'
}, {
duration: 400,
done: function() {
$('#caption').html(words[i = (i + 1) % words.length]);
}
}).delay(300).animate({
width: 'toggle'
}, 400);
}, 5000);
body {
background: #333;
}
#caption {
height: 200px;
font-size: 80px;
line-height: 100px;
color: #fff;
overflow: hidden;
vertical-align: top;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="caption"></div>
Every 5 seconds you get the toggle change of the words array. What I'd like to create, but I'm failing, is to have the toggle, then change few words in the .words span that are located in the words_array, and then after I've changed all the words, the toggle will happen, to the second sentence in the words array, and now I'll change the .words with the associated words_array and so on (if I have more sentences/words).
So the animation goes like this:
First 'slide': We are FUN
CREATIVE <- only this changes
INNOVATIVE
Slide toggle to second 'slide': We like the WEB
WORLD
And I could add as much words/slides as I want.
Doing one (just changing the words) or the other (sliding the sentence) is rather easy, but combining them is where I am stuck :\
EDIT:
I using the solution provided I tweaked the code a bit:
var words_array = [];
words_array[0] = ['FUN', 'CREATIVE', 'INNOVATIVE'];
words_array[1] = ['WEB', 'WORLD'];
var words = ['We are <span class="words" style="background:#F33B65; font-weight:bold; padding: 0 10px;">FUN</span>',
'We like the <span class="words" style="background:#8be32d; font-weight:bold; padding: 0 10px;">WEB</span>'
];
var $caption = $('#caption'),
i = 1,
w = 0,
$replace = $caption.find('.words');
function switchSentence() {
$caption.animate({
width: 'toggle'
}, {
duration: 400,
done: function() {
i = (i + 1) % words.length;
w = 0;
$caption.html(words[i]);
$replace = $caption.find('.words');
}
}).delay(300).animate({
width: 'toggle'
}, 400).delay(300);
}
switchSentence();
function switchWord() {
if (w >= words_array[i].length - 1) {
switchSentence();
w = 0;
} else {
w += 1;
}
if (words_array[i]) {
$replace.animate({
width: 'toggle'
}, {
duration: 400,
done: function() {
$replace.text(words_array[i][w]);
}
}).delay(300).animate({
width: 'toggle'
}, 400);
}
}
switchWord();
setInterval(switchWord, 2500);
body {
background: #333;
}
#caption {
height: 200px;
font-size: 80px;
line-height: 100px;
color: #fff;
overflow: hidden;
white-space: nowrap;
display: inline-block;
vertical-align: top;
}
.words {
display: inline-block;
vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="caption"></div>
Added another animation in the words toggle. Thanks somethinghere for all the help!!

How about adding another timeout that will simply loop through the current available words? When you switch the arrays, simple reset the loop and let it check the correct amount of words. Notice in the snippet how the function switchSentence and switchWords are entirely unrelated. The switchWords function makes use of the currently selected sentence, and the swicthSentence function does the changing of the sentence, as the name suggests. This way you don't really have to know how to align them properly, they will do their job regardless. Have a look at the snippet:
var words_array = [
['FUN', 'CREATIVE', 'INNOVATIVE'],
['WEB', 'WORLD']
];
var words = [
'We are <span class="words fun">FUN</span>',
'We like the <span class="words like">WEB</span>'
];
var caption = $('#caption'),
i = 1,
w = 0,
replace = caption.find('span');
function switchSentence() {
caption.animate({width: 'toggle'},{
duration: 400,
done: function() {
i = (i + 1) % words.length;
w = 0;
caption.html(words[i]);
replace = caption.find('span');
}
}).delay(300).animate({width: 'toggle'}, 400);
}
switchSentence();
setInterval(switchSentence, 5000);
function switchWord(){
if(w >= words_array[i].length - 1) w = 0;
else w += 1;
if(words_array[i]) replace.text(words_array[i][w])
}
switchWord();
setInterval(switchWord, 500);
body {
background: #333;
}
#caption {
height: 200px;
font-size: 80px;
line-height: 100px;
color: #fff;
overflow: hidden;
vertical-align: top;
white-space: nowrap;
}
.fun, .like { font-weight: bold; }
.fun { background: #F33B65; }
.like { background: #8be32d; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="caption"></div>
I also decided to clean up your code a bit to make it more legible and useable. I moved the two switching functions into separate functions and passed them to the interval listeners separately. This is so I could immediately kickstart them by calling them once myself. I also streamlined your array, and moved the style declaration into your CSS instead of inline styles (which makes both your JS and CSS look a lot cleaner).