Animating "y" axis of a target breaks its start/end point from itself in ScrollTrigger.

[Yunus Emre]

Hi,

After animating y axis position in callback functions like "onEnter" in ScrollTrigger, the target moves but its start/end points doesn't follow it. How can I fix it?

I'm trying to make a text fade-in / fade-out animation like in the  "apple.com/airpods-max"  website.

I might ask other questions as the work progress. ( eg: how to effectively manage multiple targets for this example )

 

 

See the Pen BaRjWEO by ynsmrsk (@ynsmrsk) on CodePen

[OSUblake]

Hi Yunus!

 

It's not supposed to follow it. Everything is calculated upfront to optimize performance. 

 

And wouldn't it be simpler to use a timeline for animations?

 

 

[Yunus Emre]

I tried the timeline way but didn't work for me.

By making it scrollable I wanted to users had the ability to see text as much as they want. Not just in a timeline duration.

If you are talking about using scrolltrigger with timeline instead of callback events, I don't have an idea how to do that.

And tried a tricky way like playing on start/end values but that didn't help either.

 

Actual problem is when onEnter and onLeave, the fading in/out works but sliding text don't because of its start/end point is shifted.

Do you have any other advise about achieving this type of animation? I think GSAP is robust enough to do it how apple does exactly.

[OSUblake]

I'm not sure what you're really asking, but everything on the Apple site can be done using GSAP. Not saying it will be easy. Those Apple engineers are pretty good at their craft.

 

By a timeline, I meant like this.

 

gsap.timeline({
  scrollTrigger: {
   	trigger: "...",
    toggleActions: "..."
  }
})
.to(".foo", {
  ...
});

 

[Yunus Emre]

Yes this was the approach I went first. 

Code was like the following:

 

See the Pen RwVrQvv?editors=0010 by ynsmrsk (@ynsmrsk) on CodePen

 

This time the target's opacity can stay between 0 and 1. So the text looks a bit faded but visible for the most part in the scrolltrigger area.

I wanted it to fully opaque between scrolltrigger area and totally fades out to zero when goes out from that area.

 

--

 

I solved problem through adjusting y values in gsap.to() in callbacks.

 

See the Pen BaRjWEO?editors=0010 by ynsmrsk (@ynsmrsk) on CodePen

 

Thanks for the help though.