Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Brittany@Decisely

Adding a pause at the end of ScrollTrigger timelines

Recommended Posts

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,
}, "<");

 

 

 

Link to comment
Share on other sites

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 :) 

  • Like 1
Link to comment
Share on other sites

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! :) 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×