Malik Turk

Actually, it's not related to the start position, image that I have a vue component that have this animation stuff and I called this component twice times, for the first calling it was starting normally but for the second it's wrong, and that happens because of a line-height in a component between them, let me explain it: I have the structure like the below <Animation component /> | animation starts normally from the top of the component <Text Component /> | a text that have it's styles + line-height: 80px; <Animation component /> | same component but the animation starts incorrectly So when I remove the line-height it works normally, and this happens in another pages and because of line-height. Please advise.

Hi there, I'm have an animation that changes the scale of an image from 0.6 to 1. My problem is ScrollTrigger starts from a wrong position, I have an text in one of the upper sections, it has a line height of 80px, when I remove this lien-height it works good, that solves it but it's not the solution because I'm facing this in different pages and it's caused because of another element. Also, I'm implementing this using Nuxt/Vuejs. Here is my animation: const tl = gsap.timeline().fromTo( this.$refs["marquee-image"], { scale: 0.6, transformOrigin: "50%", }, { scale: 1, transformOrigin: "50%", } ); and this is ScrollTrigger config: ScrollTrigger.create({ animation: tl, trigger: this.$refs["marquee"], scrub: true, start: "top", end: "+=1000", pin: true, }); Here is the start of the scroll trigger it should be on the start of the black area That's my story, thanks in advance ☺️

@OSUblake Thank you so much!! it worked! ?

Hello, I'm working on an animation for my project, I have an animation that move the text from right to left of the screen, I need to end it before the end of the scrollTrigger. let tl = gsap.timeline(); const tween = gsap.fromTo(marqueeText, { translateX: 0, }, { translateX: 100 }); tl.add(tween); ScrollTrigger.create({ animation: tl, trigger: document.querySelector('.marquee-image') start: 'top', end: 'bottom', pin: true, scrub: true, pinType: 'transform', }); I need to end the tween before the scroll ends, please advise.