How to set the correct movement dynamically

[Dmitry K.]

Hello, dear GSAP-team!

Thank you again for such a wonderful plugin. I have a problem, I have been trying to solve it for several days.
The problem is that the element on the page must move by scroll along the x-axis to the right and left, while it is fixed. It is initially located in the center of the page on the x-axis. In the process of scrolling in the first section, everything works as it should, the element is moved by x pixels to the left. In the next part, you need to move the element either to its original position, i.e. to zero along the x-axis, or to the right by some number of pixels - in this case, the animated transition does not working - the element returns to its position immediately.
I implemented an approximate scheme in codepen, the problem is on line 33. Please, help.

Sorry for my english;)

 

See the Pen ZEWQEma by totibis (@totibis) on CodePen

[ZachSaucier]

Hey Dmitry and welcome to the GreenSock forums.

 

Putting ScrollTriggers on tweens inside of a timeline doesn't make much sense. You should either apply the ScrollTrigger to the timeline itself or keep the animations separate from each other and apply ScrollTriggers to each.

 

Here's how I'd approach your situation:

See the Pen eYZJpzv?editors=0010 by GreenSock (@GreenSock) on CodePen

[Dmitry K.]

Thank you very much for such a quick response!
The example I have provided is oversimplified.
In reality, the project structure is modularized.
Could you give some advice on the general structure of the animation, i.e. for the animation of the entire page to work correctly, does globalTl need to have its own scrollTrigger?

[ZachSaucier]

9 minutes ago, Dmitry K. said:

Could you give some advice on the general structure of the animation, i.e. for the animation of the entire page to work correctly, does globalTl need to have its own scrollTrigger?

It's pretty hard to say without seeing the full picture. An alternative to the approach I used is to create multiple animations, each with their own ScrollTrigger but not nest them in a timeline.

 

Maybe you could make a minimal demo that better exemplifies your situation?

[Dmitry K.]

I think the best way to show the big picture is the animation concept video. The problem is that it is impossible to get by with just one timeline, since for each section, different elements are the trigger for animation.

 

Here is a link to google disk with video - https://drive.google.com/file/d/17tdw1iH3i_IYjDVn3vVUJqtaXR-7sO2r/view

[ZachSaucier]

5 hours ago, Dmitry K. said:

https://drive.google.com/file/d/17tdw1iH3i_IYjDVn3vVUJqtaXR-7sO2r/view

Wow, making that will require a whole lot of development time, haha. That is definitely not a responsive-friendly design. Plus that background image alone will take a large amount of data. I'd give some serious pushback on it to the designers I think. 

 

If you have to create that design I'd probably try to do it in a slide type of format. What I mean by that is if the user scrolls or swipe, you go to the next section (doing all of the transition animations to get there). That way you have full control over where their scroll ends up and can finish the animations completely. 

 

If you used ScrollTrigger to do that then it would make the most sense to set everything up as a huge timeline and use labels to separate each "slide". Then you can use ScrollTrigger's snapping to end up at a particular section. However that may not be the type of scroll effect you'd want (it would allow users to "skip" sections if they scroll fast). If you want to limit it to the next or previous section then you could use a different solution that uses the wheel event plus a library like Hammer.js to detect swipe direction. 

[Dmitry K.]

2 hours ago, ZachSaucier said:

Wow, making that will require a whole lot of development time, haha. That is definitely not a responsive-friendly design. Plus that background image alone will take a large amount of data.

Unfortunately it is
but the design has already been approved and I cannot do anything about it.

 

Anyway, thanks a lot for your help, Zach!