miguelst

Thanks @mvaneijgenThat's a good idea, to make it 100% of the viewport. Could you guide me in the right direction? is it enough to set the wrapping div to 100vh?

@mvaneijgen There is one issue I'm seeing, and that is a bunch of whitespace underneath the component, I guess that's the original height that the component had without the fixed scrolling? Any idea how to get rid of that? If I set a fixed height of 500px on the container the scroll stops working

Thanks @mvaneijgen I've got a solution using the complex tween now, I'm not sure I understand it completely, but it works!

Hi @mvaneijgen I set up a demo to recreate what I'm trying to achieve: https://codepen.io/studiomonty/pen/bGJNwaB So the sticky works for the full container, however the blocks on the right should also scroll until the end, and that's the thing I'm not succeeding at. Thanks!

Thanks @mvaneijgen I suppose I can pin the container, but the idea is that the text keeps scrolling past, is it possible somehow to exclude this text from the pinned container, or have it be "absolute" so it's not affected by the pin? Thanks!

This is the design I'm trying to animate. I've discovered ScrollTrigger's pin option, and it works very well to keep the image pinned, using ScrollTrigger.create({ trigger: main.value, start: "-200px top", end: "bottom bottom", markers: true, pin: self.selector!('.ani-image') }) However, I'm wondering what the correct direction would be to also pin the 3 dots on the top, and the gradient blur at the bottom, so that when the user scrolls, the text passes by on the right, while other elements remain stationary. If anyone could give me a nudge in the right direction, I would be very grateful.

Thanks @Rodrigo that's a very good point!

I managed to get it working using the following code, it's my first Nuxt + GSAP implementation, so feel free to correct me if I'm doing something wrong here const main = ref() const imageRefs = ref<Array<any>>([]) const ctx = ref() onMounted(() => { ctx.value = gsap.context((self) => { const tl = gsap.timeline({ defaults: { duration: 1, ease: "power4.out", } }) tl.from(self.selector!('h1'), { autoAlpha: 0, y: 75, }) }, main.value) }) watchEffect(() => { // Wait for all 4 imageRefs to be present if (imageRefs.value.length === 4) { // Reuse the main context ctx.value.add((self: any) => { const tl = gsap.timeline({ defaults: { duration: 2, ease: "power4.out", } } ) tl.from(self.selector!('img'), { autoAlpha: 0, y: 75, stagger: .1, delay: .5 }) }) } })

I'm wondering if I'm doing something wrong, I followed the examples on StackBlitz (thanks for that), And I got GSAP working inside my Vue/Nuxt component in onMounted. However I'm not sure, how to start a transition when an image is loaded. The following code is working, however if I paste the onMounted code inside the imageLoaded callback, it fails. Is there a certain method to start the transition once an image is loaded? I have 4 images that are being loaded like that. Thanks! const imageLoaded = (el) => { console.log('loaded ', el) } onMounted(() => { ctx.value = gsap.context((self) => { const tl = gsap.timeline({ defaults: { duration: 1, ease: "power4.out", } } ) tl.from('img', {opacity: 0, y: 50}, 0) }, main.value) }); onUnmounted(() => { ctx.value.revert() });

Does anyone know the required steps to create something like this? It seems like the container holding the 3 sections becomes sticky at some point, and then the inner sections overlap each other until they hit the top. See this gif: https://imgur.com/a/7Ug8rVd Thank you!

Thank you! That makes sense

Is there a benefit to importing gsap via a plugin? As opposed to a direct import as in the other examples here? Thanks!

How do I kill and create scroll triggers again?

How do you mean "remove components", for general purposes is using the plugin method okay?