Jump to content
GreenSock

Malik Turk

ScrollTrigger starts from a wrong position

Recommended Posts

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 area1811139109_ScreenShot2021-11-14at8_37_25PM.thumb.png.02399ebfff1d1b7b1d6a8d61eaf9b256.png

 

That's my story, thanks in advance ☺️

Link to comment
Share on other sites

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.  

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×