Merge pull request layer5io#3951 from Udit-takkar/fix/improve-scroll

fix: improve scroll trigger
Chadha93 · Mar 19, 2023 · 94893cc · 94893cc
2 parents f5bbd92 + 99b7f1b
commit 94893cc
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 16 deletions.
diff --git a/src/sections/Meshmap/FeaturesSection/Collaborate/CollaboratorFeatures.js b/src/sections/Meshmap/FeaturesSection/Collaborate/CollaboratorFeatures.js
@@ -11,11 +11,11 @@ export default function CollaboratorFeatures({ features, theme }) {
   const [viewportStatus, setViewportStatus] = useState(
     new Array(features.length).fill(false)
   );
-  useGsapTimeline({ trigger: ".test-container3",featureContainerName: ".collaborator-features", yPercent: -400 });
+  useGsapTimeline({ trigger: ".collaborator-trigger-container",featureContainerName: ".collaborator-features", yPercent: -300 });
 
   return (
     <CollaboratorFeaturesWrapper>
-      <Container className="collaborate-container test-container3">
+      <Container className="collaborate-container collaborator-trigger-container">
         <div className="root">
           <div id="featureHeading" className="fixed">
             <h1>Collaborate</h1>
@@ -26,7 +26,7 @@ export default function CollaboratorFeatures({ features, theme }) {
             </div>
             <ul className="features collaborator-features">
               {features.map((feature, index) => (
-                <li key={index}>
+                <li className="collaborator-feature-slide" key={index}>
                   <Feature
                     {...feature}
                     onInViewStatusChanged={(state) => {

diff --git a/src/sections/Meshmap/FeaturesSection/Collaborate/CollaboratorFeatures.style.js b/src/sections/Meshmap/FeaturesSection/Collaborate/CollaboratorFeatures.style.js
@@ -49,6 +49,9 @@ const CollaboratorFeaturesWrapper = styled.section`
     position: sticky;
     top: 0;
     z-index: -1;
+    margin-top:auto;
+    margin-bottom:auto;
+    height:100%;
 
     @media (max-width: 1200px) {
       min-width: 38rem;

diff --git a/src/sections/Meshmap/FeaturesSection/Design/DesignerFeatures.js b/src/sections/Meshmap/FeaturesSection/Design/DesignerFeatures.js
@@ -12,12 +12,12 @@ export default function DesignerFeatures({ features, theme }) {
     new Array(features.length).fill(false)
   );
 
-  useGsapTimeline({ trigger: ".test-container",featureContainerName: ".design-features",yPercent: -400 });
+  useGsapTimeline({ trigger: ".design-trigger-container",featureContainerName: ".design-features",yPercent: -300 });
 
   return (
     <DesignerFeaturesWrapper>
       <Container className="designer-container">
-        <div className="root test-container">
+        <div className="root design-trigger-container">
           <div id="featureHeading" className="fixed" >
             <h1>Design</h1>
           </div>
@@ -27,7 +27,7 @@ export default function DesignerFeatures({ features, theme }) {
             </div>
             <ul  className="features design-features">
               {features.map((feature, index) => (
-                <li key={index}>
+                <li className="design-feature-slide" key={index}>
                   <Feature
                     {...feature}
                     onInViewStatusChanged={(state) => {

diff --git a/src/sections/Meshmap/FeaturesSection/Design/DesignerFeatures.style.js b/src/sections/Meshmap/FeaturesSection/Design/DesignerFeatures.style.js
@@ -49,6 +49,9 @@ margin-top: 1rem;
     position: sticky;
     top: 0;
     z-index: 0;
+    margin-top:auto;
+    margin-bottom:auto;
+    height:100%;
 
     @media (max-width: 1200px) {
       min-width: 32rem;

diff --git a/src/sections/Meshmap/FeaturesSection/Visualize/VisualizerFeatures.js b/src/sections/Meshmap/FeaturesSection/Visualize/VisualizerFeatures.js
@@ -12,11 +12,11 @@ export default function VisualizerFeatures({ features, theme }) {
     new Array(features.length).fill(false)
   );
 
-  useGsapTimeline({ trigger: ".test-container2",featureContainerName: ".visualizer-features",yPercent: -400 });
+  useGsapTimeline({ trigger: ".visualizer-trigger-container",featureContainerName: ".visualizer-features",yPercent: -100 });
 
   return (
     <VisualizerFeaturesWrapper>
-      <Container className="visualizer-container">
+      <Container className="visualizer-trigger-container">
         <div className="root test-container2">
           <div id="featureHeading" className="fixed">
             <h1>Visualize</h1>
@@ -25,9 +25,9 @@ export default function VisualizerFeatures({ features, theme }) {
             <div className="diagram scroll">
               <VisualizerFeaturesDiagram activeExampleIndex={activeExampleIndex} theme={theme} />
             </div>
-            <ul className="features visualizer-features">
+            <ul className="visualizer-features">
               {features.map((feature, index) => (
-                <li key={index}>
+                <li className="visualizer-feature-slide" key={index}>
                   <Feature
                     {...feature}
                     onInViewStatusChanged={(state) => {

diff --git a/src/sections/Meshmap/FeaturesSection/Visualize/VisualizerFeatures.style.js b/src/sections/Meshmap/FeaturesSection/Visualize/VisualizerFeatures.style.js
@@ -3,7 +3,7 @@ import styled from "styled-components";
 const VisualizerFeaturesWrapper = styled.section`
   margin-top: 1rem;
 
-  .visualizer-container {
+  .visualizer-trigger-container{
     padding: 0;
   }
 
@@ -49,6 +49,9 @@ const VisualizerFeaturesWrapper = styled.section`
     position: sticky;
     top: 0;
     z-index: -1;
+    margin-top:auto;
+    margin-bottom:auto;
+    height:100%;
 
     @media (max-width: 1200px) {
       min-width: 32rem;
@@ -78,7 +81,7 @@ const VisualizerFeaturesWrapper = styled.section`
       }
     }
   }
-  .features {
+  .visualizer-features {
     z-index: 1;
     & > li {
       list-style: none;

diff --git a/src/sections/Meshmap/FeaturesSection/useGsapTimeline.js b/src/sections/Meshmap/FeaturesSection/useGsapTimeline.js
@@ -14,8 +14,8 @@ const useGsapTimeline = ({ trigger, featureContainerName,yPercent }) => {
   const RECIPROCAL_GR = 1 / GOLDEN_RATIO;
   const DURATION = RECIPROCAL_GR;
 
-  useIsomorphicLayoutEffect(() => {
 
+  useIsomorphicLayoutEffect(() => {
     const context = gsap.context(() => {
       const _timeline = gsap.timeline({
         defaults: {
@@ -29,13 +29,14 @@ const useGsapTimeline = ({ trigger, featureContainerName,yPercent }) => {
           end: "bottom top",
           // markers: true,
           scrub: true,
-          pin: true
+          pin: true,
+          toggleActions: "play pause resume reset"
         },
       });
 
       _timeline.to(featureContainerName,{
         yPercent,
-        ease: "power1.inOut"
+        ease: "power1.inOut",
       });
     });
 

diff --git a/src/sections/Meshmap/features/features.style.js b/src/sections/Meshmap/features/features.style.js
@@ -5,7 +5,7 @@ const FeatureWrapper = styled.section`
 
 .root {
   display:flex;
-
+  
   & > .text {
     font-family:'Qanelas Soft','Qanelas Soft', sans-serif;
     opacity:0;