jelmer

gotem, thanks

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

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

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 changed the trigger to .section-2, still does not do what i want.

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

Nevermind, still does not work.. I have an example now here, maybe you can take a look at this: https://codepen.io/royalution/pen/WNrEBzE So the red div has to resize on scroll and when that happend you can scroll further to the divs below section-2

I think this will do. Thankyou very much.

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.

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.

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. https://codepen.io/pfeilal23/pen/wvKdmJr

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.

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