Visual23

May 9, 2023

I figured it out. Thanks ChatGPT! Haha

I'll update the Pin soon.

Thanks ya'll!

May 9, 2023

Hi all,

I'm working on a project where I have multiple main sections and some have sub sections. I have a timeline for each section and they are all chained to one scrolltrigger. Everything is working great but I want to have a side navigation that will take you to the end of the timeline for the menu item. It works great if I start at the first menu item and work my way down but when I try to go to a menu item that I have already went to, it doesn't go to that timeline. Additionally, once you go to that timeline I would like to continue scrolling as if I were at that section and never clicked a button. I have been at this all day and I'm stumped. Am I going about this all wrong?

Thanks in advance for any help!

See the Pen rNrYVNr by visual23 (@visual23) on CodePen

January 31, 2023

Woohoo! I finally got it all working perfectly. I created my timeline for each section and then a scrollTrigger for each section. In each scrollTrigger I have the "animation" set to the section timeline and the toggleActions to play onEnter/onEnterBack and reset onLeave/onLeaveBack.

Thanks for all of your help!

const animate_01 =  gsap.timeline({paused:true})
.fromTo('#section-1 .svg-wrapper', {
    opacity:0,
    scale: "1.5",    
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "none",
    scale: "1", 
    delay: 0,    
  })
  .fromTo('#section-1 #title', {
    opacity:0
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "none",
    scale: "1", 
    delay: 0
  })  
  .from("#section-1 #mask-path-1", { 
    duration: 2, 
    drawSVG: 0, 
    ease: "none" 
  })
  .from("#section-1 #mask-path-2", { 
    duration: .5, 
    drawSVG: 0, 
    ease: "none" 
  },">-0.05")
  .fromTo('#section-1 .blob-wrapper', {
    opacity:0, 
    scale: ".5"
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "back",
    scale: "1", 
    delay: 0
  },">-0.05")
  .fromTo('#section-1 .panel', {
    opacity:0
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "power1.out",
    y: "-=25",
    delay: 0
  });

ScrollTrigger.create({
    trigger: '#section-1',
    animation: animate_01,
    toggleActions:"play reset play reset",
    start: () => {
      return `top center`;
    },
    end: () => {
      return `bottom center`;
    }
});

January 31, 2023

Hello,

I have been messing with this for hours and I finally see what is happening. If you scroll at normal speed through each section and then go back and forth to each section everything works fine but if you can faster and an animation hasn't finished, it will keep happening in the background and what I have in onLeave and onLeave back doesn't reset the elements. It's almost like on onLeave and onLeaveBack I need to kill the animations. You can see what I mean in the codepen above.

Thanks in advance!

January 30, 2023

Hi @Rodrigo

Outside of the DrawDVG instances and knowing I'm animating many elements, is your example with the callback events still the way to go?

Thanks!

January 30, 2023

Hi @Rodrigo

I think I'm getting close. Everything is great when I'm going forward the first time and then backwards but when I get back to section 1 and go forward again, it get's whacky. I included the code for timeline 1. If I understand your example, onEnter and onEnterBack are basically the "to" items and onLeave and onLeaveBack are the "from" items. Is that correct?

Thanks!!!

timelines[1] = gsap.timeline({
  scrollTrigger: {
    trigger: "#section-1",
    start: () => {
      return `top center`;
    },
    end: () => {
      return `bottom center`;
    },
    //markers: true,
    id: "section-1",
    //onEnter: () => video_00.pause()
    onEnter: () => {
        if (sectionChecks[1]) {
          console.log('s1 - onEnter')
          gsap.to('.section-menu', {
            opacity:1, 
            duration:0.5, 
            ease: "none",
            delay: 0,    
          })
          gsap.to('#section-1 .svg-wrapper', {
            opacity:1, 
            duration:0.5, 
            ease: "none",
            scale: "1", 
            delay: 0,    
          })
          gsap.to('#section-1 #title', {
            opacity:1, 
            duration:0.5, 
            ease: "none",
            scale: "1", 
            delay: 0
          })  
          gsap.from("#section-1 #mask-path-1", { 
            duration: 2, 
            drawSVG: 0, 
            ease: "none" 
          })
          gsap.from("#section-1 #mask-path-2", { 
            duration: .5, 
            drawSVG: 0, 
            ease: "none" 
          })
          gsap.to('#section-1 .blob-wrapper', {
            opacity:1, 
            duration:0.5, 
            ease: "back",
            scale: "1", 
            delay: 0
          })
          gsap.to('#section-1 .panel', {
            opacity:1, 
            duration:0.5, 
            ease: "power1.out",
            y: "-=25",
            delay: 3
          });
        } else {
          sectionChecks[1] = true;
        }
    },
    onEnterBack: () => {
      console.log('s1 - onEnterBack')
        gsap.to('.section-menu', {
          opacity:1, 
          duration:0.5, 
          ease: "none",
          delay: 0,    
        })
        gsap.to('#section-1 .svg-wrapper', {
          opacity:1, 
          duration:0.5, 
          ease: "none",
          scale: "1", 
          delay: 0,    
        })
        gsap.to('#section-1 #title', {
          opacity:1, 
          duration:0.5, 
          ease: "none",
          scale: "1", 
          delay: 0
        })  
        gsap.from("#section-1 #mask-path-1", { 
          duration: 2, 
          drawSVG: 0, 
          ease: "none" 
        })
        gsap.from("#section-1 #mask-path-2", { 
          duration: .5, 
          drawSVG: 0, 
          ease: "none" 
        },">-0.05")
        gsap.to('#section-1 .blob-wrapper', {
          opacity:1, 
          duration:0.5, 
          ease: "back",
          scale: "1", 
          delay: 0
        },">-0.05")
        gsap.to('#section-1 .panel', {
          opacity:1, 
          duration:0.5, 
          ease: "power1.out",
          y: "-=25",
          delay: 3
        });
    },
    onLeave: () => {
        if (sectionChecks[1]) {
          console.log('s1 - onLeave')
          gsap.to('#section-1 .svg-wrapper', {
            opacity:0,
            scale: "1.5",
            duration:0.1,
            ease: 'none'  
          })
          gsap.to('#section-1 #title', {
            opacity:0, 
            duration:0.1,
            ease: 'none' 
          })  
          gsap.from("#section-1 #mask-path-1", { 
            duration: 0.1, 
            drawSVG: 0, 
            ease: "none" 
          })
          gsap.from("#section-1 #mask-path-2", { 
            duration: 0.1, 
            drawSVG: 0, 
            ease: "none" 
          })
          gsap.to('#section-1 .blob-wrapper', {
            opacity:0, 
            scale: ".5", 
            duration:0.1,
            ease: 'none' 
          })
          gsap.to('#section-1 .panel', {
            opacity:0, 
            duration:0.1,
            ease: 'none', 
            y: "-=0",
          });
        } else {
          sectionChecks[1] = true;
        }
    },
    onLeaveBack: () => {
      console.log('s1 - onLeaveBack')
      gsap.to('#section-1 .svg-wrapper', {
        opacity:0,
        scale: "1.5",
        duration:0.1,
        ease: 'none'  
      })
      gsap.to('#section-1 #title', {
        opacity:0, 
        duration:0.1,
        ease: 'none' 
      })  
      gsap.from("#section-1 #mask-path-1", { 
        duration: 0.1, 
        drawSVG: 0, 
        ease: "none" 
      })
      gsap.from("#section-1 #mask-path-2", { 
        duration: 0.1, 
        drawSVG: 0, 
        ease: "none" 
      })
      gsap.to('#section-1 .blob-wrapper', {
        opacity:0, 
        scale: ".5", 
        duration:0.1,
        ease: 'none' 
      })
      gsap.to('#section-1 .panel', {
        opacity:0, 
        duration:0.1,
        ease: 'none', 
        y: "-=0",
      });
    }
  }
})
.fromTo('.section-menu', {
    opacity:0    
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "none",
    delay: 0,    
  })
.fromTo('#section-1 .svg-wrapper', {
    opacity:0,
    scale: "1.5",    
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "none",
    scale: "1", 
    delay: 0,    
  })
  .fromTo('#section-1 #title', {
    opacity:0
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "none",
    scale: "1", 
    delay: 0
  })  
  .from("#section-1 #mask-path-1", { 
    duration: 2, 
    drawSVG: 0, 
    ease: "none" 
  })
  .from("#section-1 #mask-path-2", { 
    duration: .5, 
    drawSVG: 0, 
    ease: "none" 
  },">-0.05")
  .fromTo('#section-1 .blob-wrapper', {
    opacity:0, 
    scale: ".5"
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "back",
    scale: "1", 
    delay: 0
  },">-0.05")
  .fromTo('#section-1 .panel', {
    opacity:0
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "power1.out",
    y: "-=25",
    delay: 0
  });

January 30, 2023

Hello!

Thanks for pointing on the issue with the start and end points. That makes sense now.

I will give this a try and let you know.

Thanks so much!

January 30, 2023

Hello,

I added the codepen demo. Just for demo purposes, I have the h2 scaling when the section is in view, I'd like that to reset and happen every time the section is in view.

Thanks!

January 30, 2023

Hi @Rodrigo

I realized I didn't add the username and password but I edited the post.

Username: demo

Password: demopass

I will work on the codepen demo.

Thanks!

January 30, 2023

Hi all,

If you look at the link below I have the section animations playing when a section is in view. It works by scrolling or using the dot navigation. After I go to a section and it animates in as intended. I'd like to be able to leave that section, reset it so when I come back it plays again. I've tried adding toggleActions but it doesn't seem to work. Thanks in advance!

Username: demo

Password: demopass

https://v23static.wpengine.com/story-of-water.php

My GSAP code:

const timelines = [];

timelines[0] = gsap.timeline({
  scrollTrigger: {
    trigger: "#section-0",    
    start: () => {
      return `top top`
    },
    end: () => {
      return `bottom bottom`
    },
    //markers: true,
    id: "section-0", 
    onLeaveBack: () => video_00.play(),
  }
})

timelines[1] = gsap.timeline({
  scrollTrigger: {
    trigger: "#section-1",
    start: () => {
      return `top top`
    },
    end: () => {
      return `bottom bottom`
    },
    //markers: true,
    id: "section-1",
    //onEnter: () => video_00.pause()

  }
})

timelines[2] = gsap.timeline({
  scrollTrigger: {
    trigger: "#section-2",
    start: () => {
      return `top top`
    },
    end: () => {
      return `bottom bottom`
    },
    //markers: true,
    id: "section-2"
  }
})

timelines[3] = gsap.timeline({
  scrollTrigger: {
    trigger: "#section-3",
    start: () => {
      return `top top`
    },
    end: () => {
      return `bottom bottom`
    },
    //markers: true,
    id: "section-3",
  }
})

timelines[4] = gsap.timeline({
  scrollTrigger: {
    trigger: "#section-4",
    start: () => {
      return `top top`
    },
    end: () => {
      return `bottom bottom`
    },
    //markers: true,
    id: "section-4"
  }
})

timelines[5] = gsap.timeline({
  scrollTrigger: {
    trigger: "#section-5",
    start: () => {
      return `top top`
    },
    end: () => {
      return `bottom bottom`
    },
    //markers: true,
    id: "section-5"
  }
})

timelines[6] = gsap.timeline({
  scrollTrigger: {
    trigger: "#section-6",
    start: () => {
      return `top top`
    },
    end: () => {
      return `bottom bottom`
    },
    //markers: true,
    id: "section-6"
  }
})

timelines[1]
.fromTo('.section-menu', {
    opacity:0    
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "none",
    delay: 0,    
  })
.fromTo('#section-1 .svg-wrapper', {
    opacity:0,
    scale: "1.5",    
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "none",
    scale: "1", 
    delay: 0,    
  })
  .fromTo('#section-1 #title', {
    opacity:0
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "none",
    scale: "1", 
    delay: 0
  })  
  .from("#section-1 #mask-path-1", { 
    duration: 2, 
    drawSVG: 0, 
    ease: "none" 
  })
  .from("#section-1 #mask-path-2", { 
    duration: .5, 
    drawSVG: 0, 
    ease: "none" 
  },">-0.05")
  .fromTo('#section-1 .blob-wrapper', {
    opacity:0, 
    scale: ".5"
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "back",
    scale: "1", 
    delay: 0
  },">-0.05")
  .fromTo('#section-1 .panel', {
    opacity:0
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "power1.out",
    y: "-=25",
    delay: 0
  }) 


timelines[2]
.fromTo('#section-2 .svg-wrapper', {
    opacity:0,
    scale: "1.5",
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "none",
    scale: "1", 
    delay: 0,
  })
  .from("#section-2 #mask-path-1", { 
    duration: .3, 
    drawSVG: 0, 
    ease: "none" 
  })
  .from("#section-2 #mask-path-2", { 
    duration: .2, 
    drawSVG: 0, 
    ease: "none" 
  },">-0.1")
  .fromTo('#section-2 .blob-wrapper', {
    opacity:0, 
    scale: ".5"
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "back",
    scale: "1", 
    delay: 0
  })
.fromTo('#section-2 .panel', {
    opacity:0
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "power1.out",
    y: "-=25",
    delay: 0
  })


timelines[3]
.fromTo('#section-3 .svg-wrapper', {
    opacity:0,
    scale: "1.5",
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "none",
    scale: "1", 
    delay: 0,
  })
  .fromTo('#section-3 #mini-tower-1', {
    opacity:0, 
  }, {
    opacity:1, 
    duration:0.3, 
    ease: "linear",
    delay: .5
  },">-0.4")
  .fromTo(
      "#section-3 #mini-tower-1 .water", 
      { transform: "translateY(36px)" },
      { transform: "translateY(0px)", duration: 1 
    },">-0.3")
  .fromTo(
      "#section-3 #mini-tower-1 .water-waves", 
      { transform: "translateX(44px)" },
      { transform: "translateX(1px)", duration: 1,ease: "linear", repeat: -1 
    },">-0.8")
  .fromTo('#section-3 #mini-tower-2', {
    opacity:0, 
  }, {
    opacity:1, 
    duration:0.3, 
    ease: "linear",
    delay: 0
  },">-1")
  .fromTo(
      "#section-3 #mini-tower-2 .water", 
      { transform: "translateY(36px)" },
      { transform: "translateY(0px)", duration: 1 
    },">-0.3")
  .fromTo(
      "#section-3 #mini-tower-2 .water-waves", 
      { transform: "translateX(44px)" },
      { transform: "translateX(1px)", duration: 1,ease: "linear", repeat: -1 
    },">-0.8")
  .fromTo('#section-3 #mini-tower-3', {
    opacity:0, 
  }, {
    opacity:1, 
    duration:0.3, 
    ease: "linear",
    delay: 0
  },">-1")
  .fromTo(
      "#section-3 #mini-tower-3 .water", 
      { transform: "translateY(36px)" },
      { transform: "translateY(0px)", duration: 1 
    },">-0.3")
  .fromTo(
      "#section-3 #mini-tower-3 .water-waves", 
      { transform: "translateX(44px)" },
      { transform: "translateX(1px)", duration: 1,ease: "linear", repeat: -1 
    },">-0.8")
  .fromTo('#section-3 #mini-tower-4', {
    opacity:0, 
  }, {
    opacity:1, 
    duration:0.3, 
    ease: "linear",
    delay: 0
  },">-1")
  .fromTo(
      "#section-3 #mini-tower-4 .water", 
      { transform: "translateY(36px)" },
      { transform: "translateY(0px)", duration: 1 
    },">-0.3")
  .fromTo(
      "#section-3 #mini-tower-4 .water-waves", 
      { transform: "translateX(44px)" },
      { transform: "translateX(1px)", duration: 1,ease: "linear", repeat: -1 
    },">-0.8")
  .fromTo('#section-3 #mini-tower-5', {
    opacity:0, 
  }, {
    opacity:1, 
    duration:0.3, 
    ease: "linear",
    delay: 0
  },">-1")
  .fromTo(
      "#section-3 #mini-tower-5 .water", 
      { transform: "translateY(36px)" },
      { transform: "translateY(0)", duration: 1 
    },">-0.3")
  .fromTo(
      "#section-3 #mini-tower-5 .water-waves", 
      { transform: "translateX(44px)" },
      { transform: "translateX(1px)", duration: 1,ease: "linear", repeat: -1 
    },">-0.8")
  .fromTo('#section-3 #mini-tower-6', {
    opacity:0, 
  }, {
    opacity:1, 
    duration:0.3, 
    ease: "linear",
    delay: 0
  },">-1")
  .fromTo(
      "#section-3 #mini-tower-6 .water", 
      { transform: "translateY(36px)" },
      { transform: "translateY(0)", duration: 1 
    },">-0.3")
  .fromTo(
      "#section-3 #mini-tower-6 .water-waves", 
      { transform: "translateX(44px)" },
      { transform: "translateX(1px)", duration: 1,ease: "linear", repeat: -1 
    },">-0.8")
  .fromTo('#section-3 .panel', {
    opacity:0
  }, {
    opacity:1, 
    duration:0.3, 
    ease: "power1.out",
    y: "-=25",
    delay: 0
  },">-0.8")
  .call(initSection3) 


  timelines[4]  
  .fromTo('#section-4 .svg-wrapper', {
    opacity:0,
    scale: "1.5",
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "none",
    scale: "1",
    delay: 0,
  })
  .fromTo('#section-4 .dc-wrapper', {
    opacity:0,
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "none",
    delay: 0
  }) 
  .fromTo('#section-4 .panel', {
    opacity:0
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "power1.out",
    y: "-=25",
    delay: 0
  })


  timelines[5]  
  .fromTo('#section-5 .svg-wrapper', {
    opacity:0,
    scale: "1.5",
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "none",
    scale: "1",
    delay: 0,
  })
  .from("#section-5 #mask-path-1", { 
    duration: .3, 
    drawSVG: 0, 
    ease: "none" 
  })
  .fromTo('#section-5 .blob-wrapper', {
    opacity:0, 
    scale: ".5"
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "back",
    scale: "1", 
    delay: 0
  })  
  .fromTo('#section-5 .panel', {
    opacity:0
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "power1.out",
    y: "-=25",
    delay: 0
  })


  timelines[6]  
  .to('.scroll-to-continue', {
    opacity:0
  })
  .fromTo('#section-6 .svg-wrapper', {
    opacity:0,
    scale: "1.5",
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "none",
    scale: "1",
    delay: 0,
  })
  .fromTo('#section-6 #title', {
    opacity:0
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "none",
    scale: "1", 
    delay: 0
  })  
  .from("#section-6 #mask-path-2", { 
    duration: .3, 
    drawSVG: 0, 
    ease: "none" 
  },">-0")
  .from("#section-6 #mask-path-1", { 
    duration: .6, 
    drawSVG: 0, 
    ease: "none" 
  },">-0")
  .fromTo('#section-6 .blob-wrapper', {
    opacity:0, 
    scale: ".5"
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "back",
    scale: "1", 
    delay: 0
  })
  .fromTo('#section-6 .panel', {
    opacity:0
  }, {
    opacity:1, 
    duration:0.5, 
    ease: "power1.out",
    y: "-=25",
    delay: 0
  })

See the Pen oNMywPR by visual23 (@visual23) on CodePen

January 19, 2023

@elegantseagulls

I was able to figure out the big issues by breaking out the timeline creation from the foreach and now I have more control over everything. I think the code I found was flawed so that was messing me up. It all makes sense now.

Thanks you for the info about the chained to or from!

I really appreciate your help. GSAP Rocks!

January 18, 2023

Hi elegantseagulls,

Thanks so much for taking the time to help me. I added your update to the pen but it still doesn't seem to be firing soon enough. This code below confuses me. Does that all look right?

sections.forEach((section, i) => {

  timelines[i] = gsap.timeline({
  scrollTrigger: {
    trigger: `#section-${i + 1}`,
    start: () => {
      console.log('start', window.innerHeight * i);
      return `top+=${window.innerHeight * i} top`
    },
    end: () => {
      console.log('end', window.innerHeight * (i + 1));
      return `${window.innerHeight * (i + 1)} top`
    },
    scrub: true,
    markers: true,
    id: `section-${i}`,
  }
})
  i++
})

I think I can easily get the "wave-transition" part going after the other part is correct.

Thanks!!!

January 18, 2023

Hello!

I've been a little stumped with this and would love some help please. I've put together a pen using parts from other pens. Here's what I'm trying to do. I want to have 4 sections within a section container. I want the section container height to be 100vh and the child sections height to be 100% of the parent. I want all of the sections to be stacked on top of each other and their z-index to start at 1 and increase by their stacking order and positioned absolute. As the user scrolls down I want the next section to fade in and be able to do different things to elements within each section from its timeline. An example is in #section-2. I would like the div ".wave-transition" to slide up from below the bottom to act as a reveal so it covers up #section-1. So basically as the user scrolls down, I can reveal the next section and have different elements do different things. Any help would be appreciated.

Thanks!!!

See the Pen rNrYVNr by visual23 (@visual23) on CodePen

Notifications

Messages

Visual23

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Visual23

Side menu to navigate through timelines

Side menu to navigate through timelines

Restarting a timeline animation when section in view again

Restarting a timeline animation when section in view again

Restarting a timeline animation when section in view again

Restarting a timeline animation when section in view again

Restarting a timeline animation when section in view again

Restarting a timeline animation when section in view again

Restarting a timeline animation when section in view again

Restarting a timeline animation when section in view again

Multiple stacked sections using Scrolltrigger and different timelines for each section

Multiple stacked sections using Scrolltrigger and different timelines for each section

Multiple stacked sections using Scrolltrigger and different timelines for each section