scrolltrigger ScrollTrigger starts from a wrong position

[Malik Turk]

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 ☺️

[Trapti]

You can change the start property of scroll trigger to control where you wanna start the animation. For ex start="top 10%" . 

It s difficult to visualise this way. A minimal demo is useful.  

[Malik Turk]

2 hours ago, Trapti said:

You can change the start property of scroll trigger to control where you wanna start the animation. For ex start="top 10%" . 

It s difficult to visualise this way. A minimal demo is useful.  

 

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.

[GreenSock]

Hi @Malik Turk. Unfortunately it's simply impossible for us to troubleshoot blind. Please provide a minimal demo if you'd like some assistance, as @Trapti requested. A CodePen would be perfect. Here's a starter template that already imports all the plugins (you can fork it): 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

  

 

Also, transformOrigin: "50%" is invalid. I assume you meant "50% 50%" (it should have two values, one for horizontal and one for vertical). 

 

Happy tweening!