Make the animation slow

[Niloy]

Hii, suppose I have a long timeline and I triggers the main section, start: 'top 20%', end: 'bottom bottom', and main section height is almost 3000x, and my timeline animation play very quickly, I want to make it show, so user can read the text and see the animation properly

 

  // Third animation
    let downinnershow = gsap.timeline();
    downinnershow
    
        .to('.downmove', {  y: -300,  duration: 33 })
        .to('.downmove', {  y: -600,  duration: 33 },'a')
        .to('.show3', { opacity: 1, y: 80,  duration: 33 },'a')   
        .to('.showline', { opacity: 1, duration: 33 }) 
        .to('.show3', { opacity: 1,  duration: 66 })
        .to('.show3', { opacity: 0,  duration: 33 })  

        .to('.show4', { opacity: 1, y: 80, duration: 33 },'c')
        .from('.show4', {y: -80, duration: 33 },'c')
        .to('.showline2', { opacity: 1,  duration: 33 })
        .to('.show4', { opacity: 1,  duration: 33 })
        .to('.show4', { opacity: 0,  duration: 33 })
        .to('.downmove', {  y: -1000,  duration: 33 })
        .to('.show5', { opacity: 1,  duration: 33 })
        .to('.showline3', { opacity: 1,  duration: 33 })
        .to('.show5', { opacity: 1,  duration: 66 })
        .to('.show5', { opacity: 0,  duration: 33 })
        .to('.show6', { opacity: 1,  duration: 33 })
        .to('.show6', { opacity: 1,  duration: 66 })
        .to('.show6', { opacity: 0,  duration: 33 })
         .to('.show7', { opacity: 1,  duration: 33 })
        .to('.show7', { opacity: 0,  duration: 33 });
        
            
    ScrollTrigger.create({
        animation: downinnershow,
        trigger: '.downinner',
        start: 'top 20%',
        end: 'bottom bottom',
        scrub: true,
        pin:true,
        markers: true
        
    });
    

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi,

 

Maybe this video by @Cassie can help:

 

Happy Tweening!

[Niloy]

Hi Rodrigo, Thanks for this video. yes it works, but the problem is I have to make the section height 4000px. where my actual content height is 1920px. Also, I set the pin true

 

[Rodrigo]

Hi,

 

Sorry but without a minimal demo there is not a lot we can do. If you want an animation to take longer using scrub: true the only way is to increase the amount of pixels between the start and end triggers in your ScrollTrigger configuration or pinning a parent element. There could be other ways but without a demo that clearly illustrates what you're trying to do and where you're getting an issue, is really hard for us to tell.

 

Happy Tweening!

[Niloy]

https://www.loom.com/share/3c67d92abc98401aa18cab3191cfddf8 For the demo I record a loom for you. this is my  figma animation

[Niloy]

On 6/14/2024 at 5:39 AM, Rodrigo said:

Hi,

 

Sorry but without a minimal demo there is not a lot we can do. If you want an animation to take longer using scrub: true the only way is to increase the amount of pixels between the start and end triggers in your ScrollTrigger configuration or pinning a parent element. There could be other ways but without a demo that clearly illustrates what you're trying to do and where you're getting an issue, is really hard for us to tell.

 

Happy Tweening!

https://www.loom.com/share/3c67d92abc98401aa18cab3191cfddf8 For the demo I record a loom for you. this is my  figma animation

[GSAP Helper]

No no, a video recording is not a minimal demo.  Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi,

 

Indeed there is nothing we can do with a video recording, even less a recording of a figma design/concept.

 

But base on that I can tell you 100% that this can be achieved with ScrollTrigger with pinning and scrubbing and, any Tween/Timeline controlled by a scrubbed ScrollTrigger instance can be made longer with more pixels between the start and end points in the config object:

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#start

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#end

 

Take a peek at our ScrollTrigger codepen collection:

 

ScrollTrigger how to collection

https://codepen.io/collection/AEbkkJ

 

ScrollTrigger showcase collection
https://codepen.io/collection/DkvGzg

 

Happy Tweening!