We Keep Coding

Anime.js Moving Letters - Multiple Text Lines

I am working on implementing the following anime.JS effect on my site and having trouble manipulating the javascript to accommodate multiple lines of text. My desired output is that line one animates then fades out, line 2 animates etc.
https://tobiasahlin.com/moving-letters/#11
<script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml11 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml11 .line',
scaleY: [0,1],
opacity: [0.5,1],
easing: "easeOutExpo",
duration: 700
})
.add({
targets: '.ml11 .line',
translateX: [0, document.querySelector('.ml11 .letters').getBoundingClientRect().width + 10],
easing: "easeOutExpo",
duration: 700,
delay: 100
}).add({
targets: '.ml11 .letter',
opacity: [0,1],
easing: "easeOutExpo",
duration: 600,
offset: '-=775',
delay: (el, i) => 34 * (i+1)
}).add({
targets: '.ml11',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
</script>
I'd like the output to look something like this where 3 separate lines are displayed one after another - https://codepen.io/dsr/pen/mdJXEdP
How should I manipulate the JS code and what HTML classes I am using to get this effect?

you can do it with interval function, here is the example:
https://jsfiddle.net/3ux2jkpq/
<h1 class="ml11">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters">Hello</span>
<span class="letters">Goodbye</span>
</span>
</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<style>
.ml11 {
font-weight: 700;
font-size: 3.5em;
}
.ml11 .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.1em;
padding-right: 0.05em;
padding-bottom: 0.15em;
}
.ml11 .line {
opacity: 0;
position: absolute;
left: 0;
height: 100%;
width: 3px;
background-color: #fff;
transform-origin: 0 50%;
}
.ml11 .line1 {
top: 0;
left: 0;
}
.ml11 .letter {
display: inline-block;
line-height: 1em;
}
</style>
<script>
var i = 0;
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
var textWrapper = document.getElementsByClassName('letters');
textWrapper[0].style.display="none";
textWrapper[1].style.display="none";
setInterval( function() {
// Wrap every letter in a span
textWrapper[0].style.display="none";
textWrapper[1].style.display="none";
textWrapper[i].style.display="block";
textWrapper[i].innerHTML = textWrapper[i].textContent.replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml11 .line',
scaleY: [0,1],
opacity: [0.5,1],
easing: "easeOutExpo",
duration: 700
})
.add({
targets: '.ml11 .line',
translateX: [0, document.querySelector('.ml11 .letters').getBoundingClientRect().width + 10],
easing: "easeOutExpo",
duration: 700,
delay: 100
}).add({
targets: '.ml11 .letter',
opacity: [0,1],
easing: "easeOutExpo",
duration: 600,
offset: '-=775',
delay: (el, i) => 34 * (i+1)
}).add({
targets: '.ml11',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1500
});
if(i==0){i=1;}
else{i=0;}
},1800);
</script>

fullpage.js - After resposive is triggered, jQuery.position() and .offset() still return 0,0

Trying to use ScrollMagic with fullpage.js - I have searched and only found that it is suggested to use scrollBar: true or autoScrolling: false to enable jQuery positioning or offsets, however, upon responsive (which turns the page into a normal scrolling site), the position still remains at that (0,0) position.
This seems a bit confusing, as in my mind, if I say:
autoScrolling: true,
but
responsiveWidth: 991
and, via the documentation:
A normal scroll (autoScrolling:false) will be used under the defined width in pixels ... For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.
So why wouldn't my $('.fp-section').position() work after checking for Responsive in afterResponsive(isResponsive)?
example:
Codepen
jQuery('#main').fullpage({
//Navigation
lockAnchors: false,
navigation: true,
navigationPosition: 'left',
showActiveTooltip: false,
slidesNavigation: false,
//Scrolling
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: false,
fitToSectionDelay: null,
scrollBar: false,
easingcss3: 'ease',
scrollHorizontally: true,
offsetSections: false,
resetSliders: false,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
bigSectionsDestination: 'top',
dragAndMove: 'fingersonly',
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: false,
//Design
sectionsColor: ['#ccc', 'black', '#ccc'],
responsiveWidth: 991,
//Custom selectors
sectionSelector: '.section',
lazyLoading: true,
afterResponsive: function(isResponsive) {
var scene = [];
var parallaxTween = [];
var box = jQuery('.moveme');
var parallax = new TimelineMax();
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: .5,
duration: window.innerHeight + 50
}
});
for (var i = 0; i < box.length; i++) {
var yPer = -100;
var yEnd = 100;
//reset scene on responsive
if (scene[i])
scene[i].destroy(true);
parallaxTween[i] = null;
scene[i] = null;
console.log(box.closest('.section').position());
parallaxTween[i] = parallax.fromTo(jQuery('.container').eq(i), 1, {
yPercent: yPer
}, {
yPercent: yEnd,
ease: Linear.easeNone
}, 0);
scene[i] = new ScrollMagic.Scene({
triggerElement: jQuery(box[i]).closest('.section'),
})
.setTween(parallaxTween[i])
.addIndicators()
.addTo(controller);
}
}
});
.section {
position: relative;
}
.container {
position: absolute;
background: blue;
color: white;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.moveme {
margin: 0;
line-height: 100px;
text-align: center;
}
<main class="site-main fullpage-wrapper" id="main" role="main" style="height: 100%; position: relative; transform: translate3d(0px, 0px, 0px); transition: none;">
<div class="section">
<div class="container">
<p class="moveme">i should move
<p>
</div>
</div>
<div class="section">
<div class="container">
<p class="moveme">i should move
<p>
</div>
</div>
<div class="section">
<div class="container">
<p class="moveme">i should move
<p>
</div>
</div>
</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/jquery.ScrollMagic.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1295227/animation.gsap.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1295227/debug.addIndicators.js'></script>

Stopping a function and starting another

I'm trying to make a small animation (using Velocity.js) that alternates between two looping states when an svg is clicked. The first state is horizontally from scaleX(1) to scaleX(2.5) back to scaleX(1) at scaleY(1), the second is vertically scaleY(1) to scaleY(8) back to scaleY(1) at scaleX(2.5). When the svg is clicked the animation starts in it's horizontal state, clicked again, the state that was just active (horizontal) should stop, and the alternative state should start (vertical), every click changes to the alternate state. Ideally the state change is seamless in the sense that svg should scale to the correct scale on the axis that is not animating whilst the new active state is animating.
This is a gif of what i'm trying to achieve, the blue dot symbolises a click:
My current outcome is embedded, the problem i'm having is that only one state change occurs so I need to stop the previous animation. The other problem is that in the transition, the scaling does not happen at the same time, i.e the new active state's animation does not happen at the same time as scaling of the axis that is not animating in the new state. Any pointers in the right direction would be greatly appreciated.
// LINKs TO VELOCITY
// https://rawgit.com/julianshapiro/velocity/master/velocity.min.js
// https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js
var Rightscale = {
chooser: 0,
svg: $('#right').find('svg'),
init: function() {
this.bindEvents();
},
bindEvents: function() {
Rightscale.svg.on("click", function() {
console.log(Rightscale.chooser)
if(Rightscale.chooser === 0) {
Rightscale.chooser = 1;
Rightscale.horizontal();
} else {
Rightscale.chooser = 0;
Rightscale.vertical();
}
})
},
horizontal: function() {
Rightscale.svg.velocity({
scaleX: 2.5,
scaleY: 1
}, {
duration: 3000,
loop: true,
easing: "linear"
})
},
vertical: function() {
Rightscale.svg.velocity({
scaleY: 8,
scaleX: 2.5
}, {
duration: 3000,
loop: true,
easing: "linear"
})
},
}
$(document).ready(function() {
Rightscale.init();
});
#right {
width: 100vw;
height: 100vh;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
.scale {
width: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script src="https://rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script>
<div id="right">
<div class="scale">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 392 132" style="enable-background:new 0 0 392 132;" xml:space="preserve">
<g>
<path d="M76.1,26.4v100.7H44.5V26.2H20.2V3.6h80v22.8H76.1z"/>
<path d="M113,127.1V3.6h69.5v22.6H145v27.3h32.4v22.6h-32.2v28.2h38.4v22.8H113z"/>
<path d="M235.6,129.3c-26.7,0-40.7-11.9-40.7-34.6c0-4.5,0.2-6.6,1.1-11.5h26.4l-0.2,2.6c-0.2,2.3-0.2,4.5-0.2,6.6
c0,10.7,4.7,16.4,13.7,16.4c8.1,0,12.8-5.1,12.8-13.7c0-7.5-3.6-13-9.8-15.6l-12.4-4.9C204.5,65.9,197,56.3,197,37.7
C197,13.4,210.9,1,238.6,1c24.5,0,36.7,10,36.7,29.9c0,4.3-0.4,6.4-1.3,11.9h-26.5c0.6-4.5,0.8-6.2,0.8-8.8
c0-8.5-3.6-12.8-10.2-12.8c-6.4,0-10.9,4.9-10.9,11.9c0,7.2,3.6,10.9,14.7,15.4l15.8,6.2c15.8,6.4,23.7,18.1,23.7,35.4
C281.3,115.4,265.1,129.3,235.6,129.3z"/>
<path d="M345.5,26.4v100.7h-31.6V26.2h-24.3V3.6h80v22.8H345.5z"/>
</g>
</svg>
</div>
</div>

I'm not sure if this is the desired effect you wanted. But I added a line in your click handler that stops current animations.
// LINKs TO VELOCITY
// https://rawgit.com/julianshapiro/velocity/master/velocity.min.js
// https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js
var Rightscale = {
chooser: 0,
svg: $('#right').find('svg'),
init: function() {
this.bindEvents();
},
bindEvents: function() {
Rightscale.svg.on("click", function() {
Rightscale.svg.velocity("stop", true);
console.log(Rightscale.chooser)
if(Rightscale.chooser === 0) {
Rightscale.chooser = 1;
Rightscale.horizontal();
} else {
Rightscale.chooser = 0;
Rightscale.vertical();
}
})
},
horizontal: function() {
Rightscale.svg.velocity({
scaleX: 2.5,
scaleY: 1
}, {
duration: 3000,
loop: true,
easing: "linear"
})
},
vertical: function() {
Rightscale.svg.velocity({
scaleY: 8,
scaleX: 2.5
}, {
duration: 3000,
loop: true,
easing: "linear"
})
},
}
$(document).ready(function() {
Rightscale.init();
});
#right {
width: 100vw;
height: 100vh;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
.scale {
width: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script src="https://rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script>
<div id="right">
<div class="scale">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 392 132" style="enable-background:new 0 0 392 132;" xml:space="preserve">
<g>
<path d="M76.1,26.4v100.7H44.5V26.2H20.2V3.6h80v22.8H76.1z"/>
<path d="M113,127.1V3.6h69.5v22.6H145v27.3h32.4v22.6h-32.2v28.2h38.4v22.8H113z"/>
<path d="M235.6,129.3c-26.7,0-40.7-11.9-40.7-34.6c0-4.5,0.2-6.6,1.1-11.5h26.4l-0.2,2.6c-0.2,2.3-0.2,4.5-0.2,6.6
c0,10.7,4.7,16.4,13.7,16.4c8.1,0,12.8-5.1,12.8-13.7c0-7.5-3.6-13-9.8-15.6l-12.4-4.9C204.5,65.9,197,56.3,197,37.7
C197,13.4,210.9,1,238.6,1c24.5,0,36.7,10,36.7,29.9c0,4.3-0.4,6.4-1.3,11.9h-26.5c0.6-4.5,0.8-6.2,0.8-8.8
c0-8.5-3.6-12.8-10.2-12.8c-6.4,0-10.9,4.9-10.9,11.9c0,7.2,3.6,10.9,14.7,15.4l15.8,6.2c15.8,6.4,23.7,18.1,23.7,35.4
C281.3,115.4,265.1,129.3,235.6,129.3z"/>
<path d="M345.5,26.4v100.7h-31.6V26.2h-24.3V3.6h80v22.8H345.5z"/>
</g>
</svg>
</div>
</div>

$(window).scroll combining similar functions

I have several number counters and want them to start animating when the user scroll downs to them. Right now, I achieved this by writing a function for each one of them but I'm sure that's an inefficient way of doing this.
I have a working example here:
https://codepen.io/adogandesign/pen/PWqVov
HTML:
<div id="states" class="animated">
<div class="anim_num">
<svg>
<pattern>...</pattern>
<text id="count_num1"></text>
</svg>
</div>
</div>
<div id="concerts" class="animated">
<div class="anim_num">
<svg>
<pattern>...</pattern>
<text id="count_num2"></text>
</svg>
</div>
</div>
Javascript:
$(window).scroll(startCounter1);
function startCounter1() {
if ($(window).scrollTop() > $("#states").offset().top - $(window).height() + 0) {
$(window).off("scroll", startCounter1);
$("#count_num1").each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 4000,
easing: 'swing',
step: function (now) {
$this.text(now.toFixed(0));
}
});
});
}
}
$(window).scroll(startCounter2);
function startCounter2() {
if ($(window).scrollTop() > $("#concerts").offset().top - $(window).height() + 0) {
$(window).off("scroll", startCounter2);
$("#count_num2").each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 4000,
easing: 'swing',
step: function (now) {
$this.text(now.toFixed(0));
}
});
});
}
}
My question is how can I combine that javascript code into one function?

The general algorithm you can use for refactoring of this sort is:
Identify the parts that are different.
Replace those parts with variable names.
Create a function wrapper, replacing those variables with function parameters.
Replace the code with calls to that function.
So in this case, the first variance is "#states" vs "#concerts"; let's call that section. The second is #count_num1 vs #count_num2, which we can call counter. Now we can do this:
function createScrollCounter(section, counter) {
$(window).scroll(scrollCounter);
function scrollCounter() {
if ($(window).scrollTop() > $(section).offset().top - $(window).height() + 0) {
$(window).off("scroll", scrollCounter);
$(counter).each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 4000,
easing: 'swing',
step: function (now) {
$this.text(now.toFixed(0));
}
});
});
}
}
}
createScrollCounter('#states', '#count_num1');
createScrollCounter('#concerts', '#count_num2');

Use an each to loop over a common class instead of focusing on individual ID's and handle each instance inside that loop
Something like:
$('.animated').each(function() { // #states & #concerts
// current instance of the animated class
var $this = $(this),
// find associated text element,
// will be #count_num1 or #count_num2 depending on $this instance
$textEl = $this.find('text');
// check instance offset
if ($(window).scrollTop() > $this.offset().top - $(window).height() + 0) {
jQuery({
Counter: 0
}).animate({
Counter: $textEl.text()
}, {
duration: 4000,
easing: 'swing',
step: function(now) {
$textEl.text(now.toFixed(0));
}
});
}
});
Note that you probably want to check if the animation is already taking place before initializing it again for every pixel move of scroll

Simply give each text tag same class like "animation" and remove id (count_num1, count_num2) from there and at $("#count_num1") use $(".animation") I had check this method in your codepen link and it work perfectly.
$(window).scroll(startCounter1);
function startCounter1() {
if ($(window).scrollTop() > $("#states").offset().top - $(window).height() + 0) {
$(window).off("scroll", startCounter1);
$(".animation").each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() },
{
duration: 4000,
easing: 'swing',
step: function (now) {
$this.text(now.toFixed(0));
}
});
});
}
}
body{
width: 100%;
overflow-x: hidden;
font-family: Open Sans, sans-serif;
}
.scrolldown {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
}
.animated_percentage {
max-width: 100%;
margin: 0 auto;
position: relative;
}
.anim_num {
display: block;
position: relative;
max-height: 100vh;
padding: 5% 0;
font-size: 350px;
font-weight: 900;
}
#states .anim_num {
padding-left: 20%;
}
#concerts .anim_num {
padding-right: 30%;
}
#fans .anim_num {
padding-left: 15%;
}
svg {
max-width: 100%;
max-height: 100%;
}
#count_num1{
fill: url(#img1);
}
#count_num2{
fill: url(#img2);
}
#count_num3{
fill: url(#img3);
}
.exp {
position: absolute;
top: 50%;
font-size: 48px;
font-weight: 700;
color: #aabbae;
}
#states .exp {
left: 10%;
}
#concerts .exp {
right: 20%;
}
#fans .exp {
left: 5%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrolldown">
Scroll down to see the animation
</div>
<div id="states" class="animated_percentage">
<div class="anim_num">
<svg viewBox="0 0 960 540">
<pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%" x="-10%" y="-25%">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://adogandesign.com/wp-content/uploads/2017/01/AdobeStock_69678727.jpg" width="960" height="540"></image>
</pattern>
<text text-anchor="middle" x="50%" y="50%" class="animation" id="count_num1">46</text>
</svg>
</div><!--#anim_num-->
<div class="exp">
States travelled
</div>
</div>
<div id="concerts" class="animated_percentage">
<div class="anim_num">
<svg viewBox="0 0 960 540">
<pattern id="img2" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="-20%">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://adogandesign.com/wp-content/uploads/2017/01/AdobeStock_63664078.jpg" width="960" height="540"></image>
</pattern>
<text text-anchor="middle" x="50%" y="50%" class="animation" id="count_num2">97</text>
</svg>
</div><!--#anim_num-->
<div class="exp">
Concerts Given
</div>
</div>
<div id="fans" class="animated_percentage">
<div class="anim_num">
<svg viewBox="0 0 960 540">
<pattern id="img3" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="-22%">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://adogandesign.com/wp-content/uploads/2017/01/AdobeStock_93833225.jpg" width="960" height="540"></image>
</pattern>
<text text-anchor="middle" x="50%" y="50%" class="animation" id="count_num3">436</text>
</svg>
</div><!--#anim_num-->
<div class="exp">
Fans Gone Wild
</div>
</div>

slides.js causing unpredictable behavior

I'm using slides.js in a website, and the page so far is supposed to look like this:
But about 1/4 times the page loads, it instead looks like this:
Or this:
Here's my jQuery:
$(document).ready(function() {
$('#slides').slidesjs({
width: 860,
height: 250,
pagination: false,
generatePagination: false,
navigation: {
active: false
},
play: {
active: false,
effect: "fade",
interval: 7000,
auto: true,
pauseOnHover: false
},
effect: {
fade: {
speed: 2000
}
}
});
});
And the HTML is just the slides.js standard:
<style>
#slides {
display: none;
}
.container {
margin: 0 auto;
width: 860px;
}
</style>
<div class="container">
<div id="slides">
<img />
</div>
</div>
This is unfathomable annoying. It would be nice if this problem would at least be consistent.