We Keep Coding

Toggling class on scroll when div enters viewport with CSS scroll-snap

I have a vertical slideshow that scrolls/sticks to the next panel when the user scrolls. Desired effect is https://www.tesla.com but I thought I could achieve this with CSS (example below).
Example 1: https://codepen.io/moy/pen/poNrVdO
The problem is I would like to add a class so I can fade in the text when the next panel becomes 'active' and I'm not sure what the best approach is. Due to the framework this is going into, a non-jQuery solution would be preferable. I tried using http://dbrekalo.github.io/whenInViewport/ but can't get that to play ball at the minute.
import * as whenInViewport from "https://cdn.skypack.dev/when-in-viewport#2.0.4";
var WhenInViewport = window.WhenInViewport;
var elements = Array.prototype.slice.call(
document.getElementsByClassName("slideshow__panel")
);
elements.forEach(function (element) {
new WhenInViewport(element, function (elementInViewport) {
elementInViewport.classList.add("inViewport");
});
});
Update
The JS I was trying to use would only add a class and not toggle (add/remove) when items entered/left the viewport. So I decided to try a few other options. I've used AOS (Animation On Scroll) before but this is also having problems...
Example 2: https://codepen.io/moy/pen/XWNavaO
I think this is done to the overflow-y: auto which is required to get the snap-scroll to work. Can anyone offer an advise on this or would I be better moving away from snap scroll - as it's more hassle than it's worth?

Slick Slider how to change options?

I got a problem with the Slick Slider.
I want to change the 'slidesToShow 'option on every Slide.
Each slider page represents a group and only the right elements should show up on that page.
Each slide got a data-group attribute, which i´m using to count the elements and pass it to 'slickSetOption'.
https://jsfiddle.net/xnnm645x/3/
$('.slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
checkSlideToShow(nextSlide);
});
Why is there on the second page of the slider, still 4 elements instead of 3?
And if you scroll to the last slider page you can see how it change the width of the divs and suddenly becomes 3 slides. Is it possible to get rid of that transition effect?

Your code is not working because slick will inject 2 div in your .slider element for its functionality.
you can check it by logging in console
console.log($('.slider div')) // count will be 11 and it will break your logic.
You need to found the div with data attribute only.
$('.slider div *[data-group]') // count will be 9
Working example : https://jsfiddle.net/fydo8pt3/

Issue related to bootstrap carousel

I am using bootstrap carousel but I need a very simple thing to be done. My carousel is placed in the bottom of the page and I want to stick to the 1st slide of the carousel until the user reaches this section. As soon as the user will reach the section,the carousel will start playing. I do not know how to achieve this. Please help me with ideas.
Thanks in advance!

According to http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
The .slide class adds a CSS transition and animation effect, which
makes the items slide when showing a new item. Omit this class if you
do not want this effect.
So all you need to do is to add that class when the user scrolls to that element...
As in, for the example given on the link I mentioned above, the element with id='myCarousel' must be given the .slide class.
Hence, using the jquery, the code will be as follows:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>=($("#myCarousel").offset().top){
$("#myCarousel").addClass("slide");
//ANYTHING YOU WANT TO DO WHEN THE USER SCROLLS TO YOUR CAROUSEL.
}
})
});
NOTE: CODE NOT TESTED.
You can do it like that.

After doing quite a lot of research,finally I got this solution.I have mangaged to go back to the first carousel when I reach a specific portion.(Here the section where carousel does exist)
My code is:
$(document).ready(function(){
$(window).scroll(function(){
console.log($("#myCarousel").offset().top);
if($(window).scrollTop()>=$("#myCarousel").offset().top-70 && $(window).scrollTop()<2450 )
{
var index = $('.slides li').index($('.slides li:first'));
console.log(index);
$('.flexslider').data("flexslider").flexAnimate(index);
}
})
});

onload add class animate.css

I have created a parallax but it is flipping slides.
I want to add animate.css class but it's only working on the first slide. On the other slide it's not working. It is working when page is loaded, but when I click on third slide the animation is already finished.
So, to make it work properly, I created a JQuery function when the slide is active, then animate CSSclass is to be added but it's not working:
$(document).ready(function(){
if ( $('#section2').hasClass('active') ) {
$('#section2 .col-md-6').addClass('rotateInUpRight');
}
});

Add this class to the slide that has to be animated.
Not to a container containing all slides.
You have to wait at least 1 animation-frame after adding the new slide to the DOM before adding this class to the new slide.
(Or 1 animation-frame after you made it visible, in case of display:none)
If you don't know how to work with animation-frames you could use a timeout of 50ms, just to be sure.

Help needed centering thumbnail based on class name - Jquery

I have a slide show component I've been working on that is a mash up of jcycle and jcarousel. It works rather well, yet there is one last feature I'd to add that I cannot figure out. Right now if you click on a thumbnail it will center it in the carousel as long as it's not the first 2 or last 2 thumbs. This works great and I like centering the active thumbnail of the slide show.
The problem I'm running into is if the user hits the play button on the slide show or the next and previous slide buttons, the slide show cycles, yet the active slide thumbnail does not center in the carousel. I've tried unsuccessfully to check if the thumbnail anchor has class, activeSlide, and if so to center it, yet cant seem to get it to work.
Here is a link to the demo page I've been working on.
http://brettjankord.com/standards/slideshows/jslideshow-test2.php
Any help is greatly appreciated!

Put the following at the end of your onBefore method
var carousel = $('#mycarousel').data('jcarousel');
var activeIdx = $('#mycarousel img[src="'+next.src+'"]').closest('a').data('index') -2;
if (carousel)
{
carousel.scroll(activeIdx);
}
Demo at http://jsfiddle.net/JupPn/1/