[2 Animations at the same time?]

1 minute ago, b1Mind said:

https://greensock.com/docs/v3/GSAP/Timeline I really recommend looking at the docs for better examples and to understand how much control you have in timelines. 

 

tl
	.add('start')
	.to(something, {}, 'start')
	.to(something2, {}, 'start')

 

gotem, thanks

[2 Animations at the same time?]

Is it possible to play two different animations at the same time in a timeline, on scroll? If yes; how? 

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

1 hour ago, ZachSaucier said:

 

 

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

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. 

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

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, 

            });

        }

    }

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

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. 

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

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?

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

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

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

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. 

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

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.

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

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. 

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

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

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

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. 

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

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, 

            });

        }