Develop Reference

hide animated letters until animation plays

Context:
I have a subtitle "About me" that animates with the library animejs as soon as it comes into view in the screen (every time). You can find the animation here, i got it from Tobia's Moving Letters.
The problem:
As I scroll down to the subtitle, I'm able to see it right before the animation plays. So in other words: I scroll down, I read the subtitle "About me" and then it disappears just to have the letter pop in one by one.
This isn't want, I am looking for a way to have the initial text "About me" hidden and then have each animated letter appear
I made a snippet with the subtitle under some dummy text so it can be scrolled into.
// Wrap every letter in a span
var textWrapper = document.querySelector('.subtitle .ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
const subtitle_animation = anime({
targets: '.subtitle .ml6 .letter',
translateY: ["1.1em", 0],
translateZ: 0,
duration: 750,
delay: (el, i) => 100 * i + 500
})
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
const aboutme = document.getElementById('about-me');
let aboutme_vis = false
let ready_to_play = true
document.addEventListener('scroll', function () {
isInViewport(aboutme) ? aboutme_vis = true : aboutme_vis = false;
if (aboutme_vis && ready_to_play) {
subtitle_animation.restart();
ready_to_play = false
}
if (!aboutme_vis){
ready_to_play = true
}
});
/* Subtitle Animation */
.subtitle .ml6 {
position: relative;
font-size: 1em;
}
.ml6 .text-wrapper-subtitle {
position: relative;
display: inline-block;
padding-right: 10%;
overflow: hidden;
}
.ml6 .letter {
display: inline-block;
line-height: 1em;
transform-origin: 0 0;
}
<div class="">
<h1>Title</h1>
<p>The subtitle About me can be found below! </p>
<h2>Random text so its possible to scroll: </h2>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
</div>
<div class="row main-margin" id="about-me">
<h1 class="subtitle">
<span class="ml6">
<span class="text-wrapper-subtitle">
<span class="letters">About me</span>
</span>
</span>
</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
As a bonus, I would like a way to hide the text again every time it is scrolled out of screen.
This is my first StackOverflow question! I hope anyone can help me 😬

So there's most likely a better solution than this out there to be honest. But that's a quick way I found to get near to what you want. The problem with this is, that if it's in the viewport from the beginning and no scrolling occurs it will never show. You'll have to handle that.Using an IntersectionObserver would probably be a better fit for your case here.
// Wrap every letter in a span
var textWrapper = document.querySelector('.subtitle .ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
const subtitle_animation = anime({
targets: '.subtitle .ml6 .letter',
translateY: ["1.1em", 0],
translateZ: 0,
duration: 750,
delay: (el, i) => 100 * i + 500
})
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
const aboutme = document.getElementById('about-me');
let aboutme_vis = false
let ready_to_play = true
document.addEventListener('scroll', function () {
isInViewport(aboutme) ? aboutme_vis = true : aboutme_vis = false;
if (aboutme_vis && ready_to_play) {
subtitle_animation.restart();
setTimeout( () => {
aboutme.style.visibility = "visible";
} );
ready_to_play = false
}
if (!aboutme_vis){
aboutme.style.visibility = "hidden";
ready_to_play = true
}
});
/* Subtitle Animation */
.subtitle .ml6 {
position: relative;
font-size: 1em;
}
.ml6 .text-wrapper-subtitle {
position: relative;
display: inline-block;
padding-right: 10%;
overflow: hidden;
}
.ml6 .letter {
display: inline-block;
line-height: 1em;
transform-origin: 0 0;
}
#about-me {
visibility: hidden;
}
<div class="">
<h1>Title</h1>
<p>The subtitle About me can be found below! </p>
<h2>Random text so its possible to scroll: </h2>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
</div>
<div class="row main-margin" id="about-me">
<h1 class="subtitle">
<span class="ml6">
<span class="text-wrapper-subtitle">
<span class="letters">About me</span>
</span>
</span>
</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

Javascript animation after action not working

I'm trying to add a dropdown effect to my website but I can't seem to get it right.
I'd like to click on the '+' and let the shape expand to show text, so after I clicked '+', some sort of animation should begin?
I'm new to javascript and I'd like if someone could help me out
http://severinereard.be/test/
Here's the website, I only finished the mobile version so it's best viewed in a thin browser window.
In the first section 'Pelvi-périnéologie' I added a paragraph which I hid with display none.
I hope this is enough information
UPDATE:
I added the javascript and it works for the first section but not for the rest. I'd also like for the dropdown to not go so fast but smooth?
Thanks in advance!

Here's an example of a possible solution. Layout is different, but you'll get the idea.
UPDATE: included javascript to handle the click
const sections = [...document.getElementsByTagName("section")];
sections.map((section) => {
section.addEventListener("click", function() {
const paragraph = this.querySelector("p");
paragraph.style.maxHeight = "100px";
})
})
section {
display: inline-block;
}
section img,
section h3,
section h5 {
display: inline;
}
section p {
max-height: 0;
overflow-y: scroll;
transition: max-height 1s;
width: 300px;
/* for demo purpose */
}
section:hover p {
/*max-height: 100px; to force scrollbar */
}
<section>
<img src="https://via.placeholder.com/40">
<h3>Pelvi-périnéologie</h3>
<h5>+</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

Truncate paragraphs by line not characters

I have multiple items in a div with paragraphs and I would like to truncate them to 2 lines. I have tried to truncate using the height but it results in cut off words. I can't use characters because in some cases the words are long and get pushed to a new line.
I am trying to work with getClientRects() as you'll see in the fiddle below.
Also note that I can't use any plugins for the project I am working on.
I found this example on another post: Working Truncate from stackoverflow post
My Fiddle:
JS Fiddle
var lines = $(".truncate")[0].getClientRects();
var divHeight = 0;
for (var i=0, max = 2; i < max; i++)
divHeight += lines[i].bottom - lines[i].top;
divHeight += i;
$(".truncate").height(divHeight);

There's a number of issues.
The code you're trying to work from takes advantage of a quirk related to display: inline but you don't set display: inline, instead leaving .truncate at the browser default of display: block.
ready isn't a real event and jQuery no longer fakes it when using .on('ready', ...) so your code never runs.
jQuery's .height() requires that the argument be in the form of a CSS height value. This means you need to use something that results in, for example, '50px' rather than just 50.
height is ignored on inline elements so it'll have to be set on the outer element. The code you were working from did this but you didn't follow it.
Your code assumes that the number of lines will always be two or more.
overflow: hidden isn't set so the text itself will push outside its container even if the container was shortened.
All together, your code should look something like this instead:
.item {
width: 400px;
margin: 20px;
display: inline-block;
overflow: hidden;
box-sizing: content-box;
}
.truncate {
display:inline;
}
$(document).ready( function(){
var lines = $(".truncate")[0].getClientRects();
var divHeight = 0;
var max = lines.length >= 2 ? 2 : lines.length;
for (var i=0; i < max; i++) {
divHeight += lines[i].bottom - lines[i].top;
}
divHeight += i;
$(".item").height(divHeight + 'px');
});
JSFiddle

Using the css answer from css-tricks (https://css-tricks.com/line-clampin/) assuming you know the line-height.
.item {
width: 400px;
margin: 20px;
overflow: hidden;
}
.fade {
position: relative;
height: 2.4em; /* exactly two lines */
}
<div class="item fade">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="item fade">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

javascript get current distance of element from div top

I am trying to program a little script which should change the active tab when the offset of the current section is <= 0. I am running a function on every scroll event which should get the distance of every section in the body and calculate the current distance - if the distance is 0, it should be updated and the appropriate element should be set active.
I searched the web and found this solution - however the distance does not change and stays the same.
function scrollPage() {
var sections = document.getElementsByTagName('section');
for (var i = 0; i < sections.length; i++) {
console.log(sections[i].offsetTop - document.body.scrollTop);
}
}
html {
width: 100%;
}
body {
height: 100%;
margin: 0;
}
.body {
position: absolute;
height: auto;
width: auto;
padding-top: 32px;
padding-bottom: 8px;
margin: 48px 0 72px 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: scroll;
}
<html>
<body>
<div class="body" onscroll="scrollPage()">
<section id="section1">
<h1>Text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
<section id="section2">
<h1>Other text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
</div>
</body>
</html>
I know that there are ways to do this with JQuery - however I would like to avoid using JQuery so I would be happy if somebody can point out my error.
Best regards and thank you in advance,

On scroll animation using GSAP

I am using GSAP for animation, I need on scroll animation when the user scrolls the mouse wheel. Now animation is working on page load. I need content should animate on the scroll. First two articles are working but when I scroll it than animation is not working.
(function() {
var content = document.getElementById("content");
var xScroll = 0; // initialize
function scrollHorizontally(e) {
xScroll = xScroll+e.deltaY*20;
// set limits to avoid overshooting and stucking at beginning or end
var max = document.getElementById("content").innerWidth;
if (xScroll <= 0) {
xScroll = 0;
} else if (xScroll >= max) {
xScroll = max; //replace with the width of the scrollable container
}
// scroll smooth to xScroll
TweenLite.to(content, 1, { ease: Power1.easeOut, scrollTo:{x:xScroll} });
var rt = ($(window).width() - ($(".active_05").offset().left ));
if(rt>200)
{
$(".about_menu").addClass("active");
}
else
{
$(".about_menu").removeClass("active");
}
e.preventDefault();
}
if (content.addEventListener) {
// Standard
content.addEventListener("wheel", scrollHorizontally, false);
} else {
// IE 6/7/8
content.attachEvent("onmousewheel", scrollHorizontally);
}
var article_1=document.getElementById("article_1");
TweenLite.from(article_1, .5, { ease: Power0.easeOut, y: 10 });
var article_2=document.getElementById("article_2");
TweenLite.from(article_2, .5, { ease: Power0.easeOut, y: 10 });
var article_3=document.getElementById("article_3");
TweenLite.from(article_3, .5, { ease: Power0.easeOut, y: 15 });
var article_3=document.getElementById("article_4");
TweenLite.from(article_3, .5, { ease: Power0.easeOut, y: 15 });
var article_3=document.getElementById("article_5");
TweenLite.from(article_3, .5, { ease: Power0.easeOut, y: 15 });
})();
#content {
position:fixed;
display: inline-block;
overflow-x: scroll;
width: 100%;
overflow-y: hidden;
top: 0;
right:0;
height: 100%;
}
#content #horizontal_scroll{
overflow: hidden;
width:400%;/*to increase the width */
}
#horizontal_scroll .full_screen_100
{
height: 100%;
background-color: #fff;
display: flex;
}
#horizontal_scroll .full_screen_100 article{
width: 900px;
height: 100%;
float:left;
border-left: solid 1px #E2E2E2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenLite.min.js"></script>
<div id="content">
<div id="horizontal_scroll" id="scroll_container">
<div class="full_screen_100">
<article>
<p id="article_1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</article>
<article>
<p id="article_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<p id="article_3">consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article>
<p id="article_4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<p id="article_5">consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
</div>
</div>

use GSAP with scrollmagic.Check this examples Gsap with scroll animation