Jump to content
Search Community

I want to stop scrolling untill the animation ends in gsap 3.. how to do this?

jelmer test
Moderator Tag

Recommended Posts

Hi; i want to stop scrolling untill my animation resize is done.. how to do this in gsap 3? My code is now as follows:

mounted: function(){
        gsap.registerPlugin(ScrollTrigger);
        this.startAnimation();
    },
    methods: {
        async startAnimation(){
            const tl = gsap.timeline();
            tl.to("#scrollAnimationBox", {
                width: 300,
                height: 600,
                x: 325,
                y: -100,
            })
            .to("#scrollAnimationText", {
                x: -300,
                y: 50,
            })
            .to("#scrollAnimationTitle", {
                x: 550,
                y: 150,
            });
 
            ScrollTrigger.create({
                animation: tl,
                trigger: ".section-2",
                scrub: 1,
                pin: ".section-2",
                markers: true
            });
        }
Link to comment
Share on other sites

Hey jelmer and welcome to the GreenSock forums. Why not prevent the overflow while the animation is happening?

const tl = gsap.timeline();
tl.set(document.body, {overflow: "hidden"})
  .to("#scrollAnimationBox", {
  width: 300,
  height: 600,
  x: 325,
  y: -100,
})
  .to("#scrollAnimationText", {
  x: -300,
  y: 50,
})
  .to("#scrollAnimationTitle", {
  x: 550,
  y: 150,
})
  .set(document.body, {overflow: "auto"})

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Just now, ZachSaucier said:

Hey jelmer and welcome to the GreenSock forums. Why not prevent the overflow while the animation is happening?


const tl = gsap.timeline();
tl.set(document.body, {overflow: "hidden"})
  .to("#scrollAnimationBox", {
  width: 300,
  height: 600,
  x: 325,
  y: -100,
})
  .to("#scrollAnimationText", {
  x: -300,
  y: 50,
})
  .to("#scrollAnimationTitle", {
  x: 550,
  y: 150,
})
  .set(document.body, {overflow: "auto"})

 

Hey, no that is not exactly what i want to achieve.. let me explain it more clear:
The animation must happen when i scroll, like it goes further when i scroll further but the screen position must be centered at my .section-2 untill you scrolled through the full animation. 

Link to comment
Share on other sites

7 minutes ago, ZachSaucier said:

Sorry, I'm not understanding what you're wanting. Can you please make a minimal demo?

 

Like this but then with my own animation.. It must resize on scroll and after the resize finished you can scroll again to the div below. 

See the Pen wvKdmJr by pfeilal23 (@pfeilal23) on CodePen

Link to comment
Share on other sites

6 minutes ago, ZachSaucier said:

Sorry, I'm still not understanding. ScrollTrigger automatically resizes if the viewport size is changed. 

In the example above the airplane moves from left to right on scroll but the page does not scroll further to the next section untill that plane is at the right. I want to resize a div called scrollAnimationBox and i do not want the page to scroll further untill scrollAnimationBox is completely resized. 

Link to comment
Share on other sites

2 hours ago, jelmer said:

In the example above the airplane moves from left to right on scroll but the page does not scroll further to the next section untill that plane is at the right. I want to resize a div called scrollAnimationBox and i do not want the page to scroll further untill scrollAnimationBox is completely resized. 

Really really helps to post your own codepen with the minimal example, without it people are just stabbing in the dark.  Cause what it sounds like to a noob like me is you just want a basic scrub animation... While you could be trying to do something different. 

 

Simple as it gets example. Like so?

See the Pen yLeoQOG?editors=0010 by b1m1nd (@b1m1nd) on CodePen

  • Like 3
Link to comment
Share on other sites

2 hours ago, b1Mind said:

Really really helps to post your own codepen with the minimal example, without it people are just stabbing in the dark.  Cause what it sounds like to a noob like me is you just want a basic scrub animation... While you could be trying to do something different. 

 

Simple as it gets example. Like so?

 

Almost but still not it.. You still scroll across the white section when your animation is going. The position of the screen needs to be fixed in place untill the animation is done. In other words, you cant scroll to the last grey division untill the animation is finished.

Link to comment
Share on other sites

5 hours ago, jelmer said:

Almost but still not it.. You still scroll across the white section when your animation is going. The position of the screen needs to be fixed in place untill the animation is done. In other words, you cant scroll to the last grey division untill the animation is finished.

Well so at that point just add your own "buffer". I probably should have made a new pen but I duplicated to show you how both are the same pretty much.

  • just added a parent div with extra height.
  • moved the end: 'value value' of the trigger end based on that height and where I want the pin/animation to stop.
  • tweaked the animation to maybe better replicate what your after in a timeline.

 

[edit- removed rant]

 

If the updated pen is still not what your after, I would probably try just doing the disable scroll from one the onEnter/Leave pops. 

See the Pen yLeoQOG?editors=0010 by b1m1nd (@b1m1nd) on CodePen

  • Like 3
Link to comment
Share on other sites

3 hours ago, b1Mind said:

Well so at that point just add your own "buffer". I probably should have made a new pen but I duplicated to show you how both are the same pretty much.

  • just added a parent div with extra height.
  • moved the end: 'value value' of the trigger end based on that height and where I want the pin/animation to stop.
  • tweaked the animation to maybe better replicate what your after in a timeline.

 

[edit- removed rant]

 

If the updated pen is still not what your after, I would probably try just doing the disable scroll from one the onEnter/Leave pops. 

 

 

I think this will do. Thankyou very much. 

Link to comment
Share on other sites

5 hours ago, b1Mind said:

Well so at that point just add your own "buffer". I probably should have made a new pen but I duplicated to show you how both are the same pretty much.

  • just added a parent div with extra height.
  • moved the end: 'value value' of the trigger end based on that height and where I want the pin/animation to stop.
  • tweaked the animation to maybe better replicate what your after in a timeline.

 

[edit- removed rant]

 

If the updated pen is still not what your after, I would probably try just doing the disable scroll from one the onEnter/Leave pops. 

 

 

Nevermind, still does not work.. I have an example now here, maybe you can take a look at this: 

See the Pen WNrEBzE by royalution (@royalution) on CodePen



So the red div has to resize on scroll and when that happend you can scroll further to the divs below section-2

Link to comment
Share on other sites

On 6/28/2020 at 5:11 AM, jelmer said:

the red div has to resize on scroll

It's not recommended to animate the dimensions of any elements that are the triggers if those dimensions are used for calculation. ScrollTrigger can't (performantly) check to see if the size has changed and recalculate things. 

 

Why not use a container of that element that's resizing as the trigger? Then you resize a child element.

Link to comment
Share on other sites

38 minutes ago, ZachSaucier said:

It's not recommended to animate the dimensions of any elements that are the triggers if those dimensions are used for calculation. ScrollTrigger can't (performantly) check to see if the size has changed and recalculate things. 

 

Why not use a container of that element that's resizing as the trigger? Then you resize a child element.

No but it can see when te animation/timeline has ended. So i have to change the trigger?

Link to comment
Share on other sites

5 hours ago, ZachSaucier said:

What are you saying no to? 

 

I think changing the trigger to a container makes more sense, yes. That's why I suggested that you try it :) 

I changed the trigger to .section-2, still does not do what i want. 

Link to comment
Share on other sites

10 hours ago, ZachSaucier said:

You weren't loading GSAP's ScrollTrigger, you were loading some other ScrollTrigger. Load GSAP's ScrollTrigger and it will work:

 

 

This is weird because the full section just dissapears when i try this..? This is how i import my gsap.. if i import it from gsap/ScrollTrigger or just gsap is also does not work as intended. I uploaded 2 images with this response: One without the trigger hit and the otherone with the trigger hit. 

import { gsap } from "gsap";
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
export default {
    mounted: function(){
        gsap.registerPlugin(ScrollTrigger);
        this.startAnimation(ScrollTrigger);
    },
    methods: {
        async startAnimation(ScrollTrigger){
            const tl = gsap.timeline();
            tl.to("#scrollAnimationBox", {
                width: 300,
                height: 600,
                x: 325,
                y: -100,
            })
            ScrollTrigger.create({
                animation: tl,
                trigger: ".pinned",
                scrub: 1,
                pin: true,
                start: "top top",
                end: "bottom top",
                markers: true
            });
        }
    }

679441a6e7ac7032659fbf40fcbbb4c7.png

6061263221de1d6527f7c8296a90bfe3.png

Link to comment
Share on other sites

3 hours ago, ZachSaucier said:

Please make a minimal reproduction of the issue if you'd like help debugging. Sites like CodePen or CodeSandbox allow you to use frameworks/modules.

 

My codepen above that you fixed is the one but it just does not work at mine. 

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.
×
×
  • Create New...