在滚动条上显示父节时对div进行动画处理

Question

I had this working but seem to have messed it up along the way.

I am using a scroll highjack that will bring the user to a new section/card each time they scroll.

It is adding a visible class each time the user scrolls to a new section/card.

I used this as the base https://codyhouse.co/gem/page-scroll-effects

<section class="cd-section visible">
  <div>
    <h2>Page Scroll Effects</h2>
  </div>
</section>

Then when the user scrolls to a new section it removes and adds the visible to the next section.

I am animating basic content at the moment like hero text etc for each section.

<section class="cd-section visible">
  <div class="home__content-slide-right">
    <h2>Page Scroll Effects</h2>
  </div>
</section>

I am using the class name; home__content-slide-right here to animate this text using transform for now, which you can see below;

.home__content-slide-right {
   transform: translateX(-50px);
}

How I was doing it was buy just appending the .visible to the CSS which you can see below;

.visible .home__content-slide-right {
  transform: translateX(0);
}

This was working so when I scrolled to each page the animation played but now it seems to only work once when the whole page is loaded and that's it.

I have tried to remove somethings but have had no luck so far, just wondering here if anyone else had a reason for it not working.

------ Edit ------

I have added a few images below so you can see what my issue is.

This first image is with the section having the .visible class so the animation should be played.

Though as you can see when I leave the section and the .visible class is removed the css stays the same.

Answer 1

It looks like you have the "visible" class being applied to a parent element of your target section.

Your css:

.visible .home__content-slide-right {
  transform: translateX(0);
}

is written so that any parent of that element with a .visible class will apply this css rule. If you want to ensure that this fires only when visible is added to the same section, re-write the css like this:

section.visible .home__content-slide-right {
  transform: translateX(0);
}

Or make sure that no parent element has the visible class applied if it is unnecessary.