[Problem chaining scrollTrigger animations.]

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.

[Problem chaining scrollTrigger animations.]

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?

[Problem chaining scrollTrigger animations.]

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.

[Problem chaining scrollTrigger animations.]

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