From dc80a1e691eb49a5168ca8775aed57a34ac00590 Mon Sep 17 00:00:00 2001
From: Jose Buitron <jose.buitron@gmail.com>
Date: Mon, 23 Sep 2024 11:28:42 -0500
Subject: [PATCH] fix: Filter layers that used on the current transition

---
 src/storyMap/components/StoryMap.js | 34 +++++++++++++++++++----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/storyMap/components/StoryMap.js b/src/storyMap/components/StoryMap.js
index ee8521f8a..9e9c323ab 100644
--- a/src/storyMap/components/StoryMap.js
+++ b/src/storyMap/components/StoryMap.js
@@ -201,7 +201,7 @@ const Title = props => {
   );
 };
 
-const getTransition = (config, id) => {
+const getTransition = ({ config, id, direction }) => {
   const isTitle = id === 'story-map-title';
   if (isTitle) {
     return {
@@ -211,8 +211,13 @@ const getTransition = (config, id) => {
   }
   const chapterIndex = config.chapters.findIndex(chapter => chapter.id === id);
   const chapter = config.chapters[chapterIndex];
+  const next =
+    direction === 'up'
+      ? _.get(`chapters[${chapterIndex - 1}]`, config)
+      : _.get(`chapters[${chapterIndex + 1}]`, config);
   return {
     transition: chapter,
+    nextTransition: next,
     index: chapterIndex,
   };
 };
@@ -427,14 +432,14 @@ const Scroller = props => {
         offset: 0.5,
       })
       .onStepEnter(async response => {
-        const { index, transition } = getTransition(
-          {
+        const { index, transition } = getTransition({
+          config: {
             titleTransition: config.titleTransition,
             chapters: config.chapters,
           },
-          response.element.id
-        );
-
+          id: response.element.id,
+          direction: response.direction,
+        });
         response.element.classList.add('active');
         startTransition(transition);
         onStepChange?.(response.element.id);
@@ -451,16 +456,23 @@ const Scroller = props => {
         }
       })
       .onStepExit(response => {
-        const { transition } = getTransition(
-          {
+        const { transition, nextTransition } = getTransition({
+          config: {
             titleTransition: config.titleTransition,
             chapters: config.chapters,
           },
-          response.element.id
-        );
+          id: response.element.id,
+          direction: response.direction,
+        });
         response.element.classList.remove('active');
         if (transition?.onChapterExit && transition.onChapterExit.length > 0) {
-          transition.onChapterExit.forEach(setLayerOpacity);
+          const onEnterLayers = nextTransition?.onChapterEnter?.map(
+            _.get('layer')
+          );
+          const filtered = transition.onChapterExit.filter(
+            transition => !_.includes(transition.layer, onEnterLayers)
+          );
+          filtered.forEach(setLayerOpacity);
         }
       });