mvaneijgen

GSAP is the magic! I'm not the one to explain it on a deeper level, but it is a nested timeline which you can just .`.add()` to an other timeline. I use it a lot to have certain elements loop infinitely while the rest of the timeline plays out.

Would this be something you could work with? I've just created a function that returns a timeline and added that to your timeline. https://codepen.io/mvaneijgen/pen/qBxjXMo?editors=1010 Otherwise could you explain your real world issue I feel that better helps us find a solution.

Is this what you mean? I've created a timeline of your scrollTrigger so that it is easier to animate multiple elements. I've created a `.fixed` element that animates at the same time as your other elements, but moves in the opposite direction. Don't know if it is the best way of doing it, but it works. https://codepen.io/mvaneijgen/pen/eYVWjOo?editors=1100

Have you seen the Observer plugin? Sounds like it does exactly what you are looking for.. Here is a great explanation video

Is something like this what you are trying to do? I've add the ScrollToPlugin to your project and on click of the indications I scroll the page `index * 100` this is just an arbitrary number, but your scroller height is 600 and you have 7 elements, so that gets you kinda close. https://codepen.io/mvaneijgen/pen/MWQmQwr?editors=1011 What I would do is add labels to your timeline `.add("myLabel")` to points you want to jump to and then you need to calculate that position based on the timeline. Here is an example of that working with just one label. That works on the third indicator (index 2) https://codepen.io/mvaneijgen/pen/eYVWVJr?editors=0011

@JoePham can you create a minimal demo for us? The demo you've posted is not yours right? And if I check your code there is no element in the demo with an id of cat. Right now I can't see how this block of code has anything to do with this demo. If you can put it in relation to the rest if the code you will be using and put that in a demo, even if it is not working we'll have a better understanding of what you are trying to do and it will be easier to help you.

I really recommend just forking my demo and just play around with everything that is possible. Keep forking the pen and keep playing around until you find something that you are happy with. Here is a demo with skewY animations https://codepen.io/mvaneijgen/pen/PoQmoEB?editors=0010

Can you elaborate what you mean? Each box in the right column is moving down on scroll at the moment right?

I was not sure about your question, but what I think you mean is something like this? I've created one timeline (I removed the CSS animations, because we are using GSAP). The left element moves up and the right element moves down and when you scroll in reverse the animation will play in reverse. Both these items have there own animation, but with the Position Parameter they will both start at the same time https://codepen.io/mvaneijgen/pen/GRQmKVv?editors=0010

Not avoid, but know why you use it. Most animations just use`.to()` and `.from()` I would add another point: 3. Scroll animations are just animations, so remove ScrollTrigger and focus on the animation at first and when you are happy with the animation enable ScrollTrigger again. example: https://codepen.io/mvaneijgen/pen/qBxrLvgd

I had to restructure your code a bit, but here it is. Personally I always like to start with a timeline and add ScrollTrigger to that, this way if I want to animate another thing this will be really easy. You want to animate two things with one scrollTrigger, but because you started with separate animations/scrollTriggers they can't easily talk to each other. Also a great thing to keep in mind is that scroll animations are just animations, so if you remove ScrollTrigger and first focus on the animation and get that to look how you want, you can then when you're done add scrollTrigger. This way you can tackle everything one step at the time. Again there is some restructuring happening with your code. I've used `object-fit:cover` for your background image. and I have overlapped all the images in CSS, because that is how you want it to look in the end. That is also something to keep in mind, it really helps if you lay everything out with CSS how you want it to look in the end and after that start animating, because then everything is already in place. That gets me to my next point `.fromTo()` is a great tool, but I rarely use it, because all the things are already in a position, so for example your image is already `opacity:1`, so if I do a `.from()` tween from `0` it gets there in one step. https://codepen.io/mvaneijgen/pen/xxYqyNw Good luck!

The elements seems to just move randomly in the x and y position, this is easily done with a timeline that randomly moves items to in those positions which then is set to repeat infinitely and an parallax effect is build in to the GSAP ScrollSmoother see the docs. I would recommend creating some demos on Codepen.io and post back here when you get stuck.

I've set it up so that the animation `.restart()` so that it will always play from 0 instead of `.play()` . And when your `breatheAnimation` is finished I call `animationRestart` onComplete. https://codepen.io/mvaneijgen/pen/bGLqbdr?editors=0011

Don't worry about it! That's programming, just get another pair of eyes on it and a solution will come. I once wasted 2 days debugging and in the end it was a space somewhere in the code that should not have been there. And about the first line I thought that was just for debugging, but GSAP inherits the style from your CSS, so if you animate from `15em` it will do nothing for the whole duration, because it already is at 15. Each line in GSAP is it's own animation and they will animate right after each other, but there are also ways to animate two animations at the same time, the possibilities are endless! Good luck and don't hesitate to ask questions. https://codepen.io/mvaneijgen/pen/poaRMPP

Is something like this what you are looking for? I used a `.fromTo()` animation to animate from and to a specific points on the path. The whole line is 100%, so you can play with the starter position by using numbers between 0% and 100%. In this demo I moved the end position to the top right position by using a higher value then 100% https://codepen.io/mvaneijgen/pen/oNEBpBV?editors=0010