1

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?

user1406440
  • 1,329
  • 2
  • 24
  • 59
  • 1
    Check out intersection observer – cloned Feb 21 '21 at 21:29
  • @cloned that's pretty neat! I've done a quick version here: https://codepen.io/moy/pen/poNrVdO seems to work well! Next step is to see if there's a way to remove and add another class, so I can use a different animation when the content leaves the viewport... – user1406440 Feb 21 '21 at 22:10
  • Actually just updated so it does that but occasionally the text doesn't fade in so I guess it's 'hanging' somewhere or maybe trying to calculate too much and gets missed? Probably a better way of writing the script though! – user1406440 Feb 21 '21 at 22:17
  • probably you need more options for when you intersect an element. Like you can do it at 25% and 75% ... and then figure out if it's leaving or entering the viewport (from top or bottom) . – cloned Feb 22 '21 at 09:48

0 Answers0