filippos

update: I found this: onLeave: function (self) { self.scroll(self.start); self.disable(); self.animation.progress(1); } ...and this works, but when I put this on a scrolltrigger timeline the animation is interrupted. When I use onComplete - nothing happens.

Hi, I would like to do the animation only once and then remove the pinSpacing after the animation is done. I tried different things but still don't know how to do it. I would like pinSpacing not to be visible when scrolling up and it would look as if there was no animation.

I noticed that this behavior is random. I resize and refresh the page on codepen. Nothing else, just a moment ago this error appeared again. The same thing happens to me on the landing page. Most of the time this works fine, but sometimes the timelines get mixed with the scrolltrigger and the animations overlap. I use google chrome on ubuntu linux.

Ok, look at this. I didin't change anything in codepen. I just refreshed the page when it wasn't at the top. Why now start and end position is in the same place?

For clarity. Pen here it works fine, but the same animation in combination with others causes problems. Is it a bad pin or something?

https://codepen.io/FilipGC/pen/PoBKqmQ This is an example of my fake horizontal animation. Such an animation oerlaps with others. It looks as if the animations on the page are loading in random order and not where they should be. It looks like thery were pinned too early. I noticed a problem with animations that use pin: true;. What am I doing wrong?

I' sorry but the landing page shows a product that is not published. But I will try to describe the problem as best as possible. It's looks like some animations play in the same time. A lot of tween is scrolltrigger. Look on apple page https://www.apple.com/iphone-14-pro/. For example when I scroll down to the caption - "Pro. Beyond." and refresh. On my site, another animation would also appear at the same time, such as the video at the beginning or something below. I'll try to show you the code for a horizontal animation soon, which usually overlaps another.

Hi, I have landing page with many advanced tweens for example frame animation like AirPods Pro, 3 horizontal tweens with pictures and much much more. When page is loading for the first time it looks normal and the content page loads properly. But when I refresh page when isn’t on top, tweens don’t load well and page content overlaps to each other. Is this a known problem? For business reasons I can't share the code here and it’s too long

Yeah it's what i want. It's full compatible with other plugins e.g. ScrollTrigger? Can I use it like separate animation in page?

Hi, it is possible to do section scrolling in GSAP like in this page - https://dark.netflix.io/en/event-timeline/jonas-kahnwald I know "snap" parameter but I want sometking like netflix do. No matter how many times someone moves the wheel, there should always be one hop to next section.

Demo shows the code, where is the problem, it does't need to work. I think that is exactly what I was looking for. Thanks!

https://codepen.io/FilipGC/pen/JjBjgqN I want to disable "scrub" for tween ".text1" that will be like autoplay.

Hi, I have one scrolltrigger timeline for image sequence animation. How can I add tween without scrubbing (scrolltrigger) into this timeline? This timeline have scrub parameter for all timeline.

@GreenSock I have another question about this animation. When scrolling faster (when there is a greater distance between the origin and the end point), the animation freezes, is there any way to make it softer?

@GreenSock Yes, THANK YOU SO MUCH! After a few changes I was able to get what I needed. You can't even imagine how many hours I spent on this animation. I'm just getting started with GSAP so I will probably start some other discussions in the future. Thank you very much once again