Jump to content
Search Community

Problem chaining scrollTrigger animations.

Tom Kochi test
Moderator Tag

Recommended Posts

I am new to GSAP.
This pen works well. But I want to do a simple change in the .to part - I want the image to move downwards and fade off when the user scroll past. That is, currently, the code is 

gsap.timeline().from(".left-div img", {
  y: 200,
  scrollTrigger: {
    trigger: ".left-div img",
    start: "-800px",
    end: "-400px",
    scrub: true
  }
}).to(".left-div img", {
  opacity: 0,
  x:100,
  scrollTrigger: {
    trigger: ".left-div img",
    start: "-200px",
    end: "-150px",
    scrub: true
  }
})

Please note the 11th line - x: 100. I want it to be y: 100 instead. Only the 11th line changes.

gsap.timeline().from(".left-div img", {
  y: 200,
  scrollTrigger: {
    trigger: ".left-div img",
    start: "-800px",
    end: "-400px",
    scrub: true
  }
}).to(".left-div img", {
  opacity: 0,
  x:100,
  scrollTrigger: {
    trigger: ".left-div img",
    start: "-200px",
    end: "-150px",
    scrub: true
  }
})

When I do so, it shows unexpected result - the image jumps down. That's the problem.

Could someone help me out?

Please correct me if this isn't the real way to accomplish this.

See the Pen KKzMKLz by tntux (@tntux) on CodePen

Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

Hey Tom and welcome to the GreenSock forums. 

 

It doesn't make much sense to put ScrollTriggers on tweens within timelines. The reason is because both the timeline and the ScrollTrigger try to control the playhead of the tweens. Just changing that fixes your issue:

 

 

Thanks, @ZachSaucier. I tried removing timetine, still the same results. Please see the pen once more. change the 12th line to y: 100 and run. You can see the jumping issue I am facing.

I have created another pen with the exact problem. 

See the Pen yLOJVQw?editors=1010 by tntux (@tntux) on CodePen

.

Here, expected behaviour is, moving down and fading the image as the user scroll past.

Link to comment
Share on other sites

 

Hey @Tom Kochi

 

That might be because - judging from the values you use - the first Trigger you create should happen after the second one but in your code is being applied before the second one, so the values are not being set correct.

 

If you simply just apply the second trigger before the first, you'll see, it works.

 

See the Pen 558e78b1a611795fd66b3cc47ab3c743 by akapowl (@akapowl) on CodePen

 

 

You could probably also use refreshPriority but it's best to create ScrollTriggers in the order they'd happen on the page

 

 

refreshPriority

number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

 

Check the docs for more info:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

Cheers. Paul

 

  • Like 3
Link to comment
Share on other sites

1 hour ago, akapowl said:

 

Hey @Tom Kochi

 

That might be because - judging from the values you use - the first Trigger you create should happen after the second one but in your code is being applied before the second one, so the values are not being set correct.

 

If you simply just apply the second trigger before the first, you'll see, it works.

 

 

 

 

 

You could probably also use refreshPriority but it's best to create ScrollTriggers in the order they'd happen on the page

 

 

refreshPriority

number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

 

Check the docs for more info:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

Cheers. Paul

 

@akapowl Thanks a lot. I got it working. But I am a bit confused. You said "the first Trigger you create should happen after the second one". I didt get that part. Does it mean the trigger happens in reverse order? Can you explain it a bi, pleaset?

Link to comment
Share on other sites

The reason why putting the .from after the .to works is because .from sets the fromVars immediately by default. Thus your .to's start values are not using the normal value of 0 but starting from the value of -200. This is one of the most common mistakes that people make with GSAP.

 

You could switch the order by using a .fromTo instead:

gsap.from(".left-div img", {
  y: 200,
  scrollTrigger: {
    trigger: ".left-div img",
    start: "-800px",
    end: "-400px",
    scrub: true
  }
})

gsap.fromTo(".left-div img", {
  opacity: 1,
  y:0,
}, {
  opacity: 0,
  y:100,
  scrollTrigger: {
    trigger: ".left-div img",
    start: "-200px",
    end: "-150px",
    scrub: true
  }
})

 

  • Like 2
Link to comment
Share on other sites

One more thing to throw in: by default, when a ScrollTrigger is applied to a tween it will cause that tween to render immediately so that it's locked-n-loaded, ready to spring into action when the scroll position is hit (the first render is always most expensive because that's when it must record the starting/ending values for fast interpolation). You can set immediateRender: false in your tween (or ScrollTrigger) to prevent that. So in your example, when I set immediateRender: false on the 2nd tween, it behaved the way I think you were expecting. 

  • Like 3
Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

The reason why putting the .from after the .to works is because .from sets the fromVars immediately by default. Thus your .to's start values are not using the normal value of 0 but starting from the value of -200. This is one of the most common mistakes that people make with GSAP.

 

You could switch the order by using a .fromTo instead:


gsap.from(".left-div img", {
  y: 200,
  scrollTrigger: {
    trigger: ".left-div img",
    start: "-800px",
    end: "-400px",
    scrub: true
  }
})

gsap.fromTo(".left-div img", {
  opacity: 1,
  y:0,
}, {
  opacity: 0,
  y:100,
  scrollTrigger: {
    trigger: ".left-div img",
    start: "-200px",
    end: "-150px",
    scrub: true
  }
})

 

Thanks @ZachSaucier. This is exactly what I wanted, and seems how it should be. Thanks a lot.

  • Like 1
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.
×
×
  • Create New...