Adding a pause at the end of ScrollTrigger timelines

[Brittany@Decisely]

I'm using ScrollTrigger, and I was wondering how I could go about adding a "pause" at the end of each of my timelines. After the last tween plays out, I just want to add a second or two at the end of the timeline before it scrolls on to the next part of the website. Below is an example of one of my timelines, but I'm looking to do this with all of them on my site. Thanks in advance!  

 

let retPageTwo = gsap.timeline({
    scrollTrigger: {
      trigger: "#retsolPage2",
      pin: true,   
      start: "top top", 
      end: "bottom -200%", 
      scrub: true, 
      
    }
  });

retPageTwo.from(".retsol-page-2 .retsol-home-text-2 h2", {
  duration: 30,
  delay: 10,
  scale: 1.5,
  ease: 'linear',
  color: '#222222',
  transformOrigin:'50% 50%',
  y: '+=-65px',
}).to("#retsolPage2 .web-browser-2", {
  duration: 20,
  delay: 10,
  ease: 'linear',
  transformOrigin:'50% 50%', 
  y: '+=-20%',
  autoAlpha: 1,
}, ">3").from(".retsol-page-2 .retsol-point", {
  transformOrigin:'50% 50%',
  duration: 50, 
  delay: 10,
  y: '+=300px', 
  autoAlpha: 0, 
  stagger: 20,
  ease: 'linear',
  scale: 0.5,
}, "<");

 

 

 

[ZachSaucier]

Hey Brittany. Since scrub animation the progress based on 1) the distance to scroll and 2) the start and end times of each tween compared to the timeline's total duration then you can add extra space by adding an empty tween at the end of your timeline. Something like this:

// last "regular" tween
.from(".retsol-page-2 .retsol-point", {
  transformOrigin:'50% 50%',
  duration: 50, 
  delay: 10,
  y: '+=300px', 
  autoAlpha: 0, 
  stagger: 20,
  ease: 'linear',
  scale: 0.5,
}, "<")
// new empty tween
.to({}, {duration: 2})

 

To make it go further (scroll wise) change your end value to a larger number  

[Brittany@Decisely]

2 hours ago, ZachSaucier said:

Hey Brittany. Since scrub animation the progress based on 1) the distance to scroll and 2) the start and end times of each tween compared to the timeline's total duration then you can add extra space by adding an empty tween at the end of your timeline. Something like this:

// last "regular" tween
.from(".retsol-page-2 .retsol-point", {
  transformOrigin:'50% 50%',
  duration: 50, 
  delay: 10,
  y: '+=300px', 
  autoAlpha: 0, 
  stagger: 20,
  ease: 'linear',
  scale: 0.5,
}, "<")
// new empty tween
.to({}, {duration: 2})

 

To make it go further (scroll wise) change your end value to a larger number  

 

 

That's such a simple answer - I don't know why I didn't think to do that! haha... Thank you! That worked!