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

Ok, maybe this is a solution, but only partial. Try to set -600px in ".box". The animation is too fast and the box is running out of the area and I would like it to stay on the black line all the time until the end of the animation. @GreenSock https://codepen.io/FilipGC/pen/jOLzaJe

In the first section there will be a photo with a shape that, when scrolled, turns into a photo that is placed in the second section. So the photo will appear in the first section and occupy its position in the second section. The HTML location should be as in the example. I am sorry if I am explaining wrongly what I want to achieve. @GreenSock

I created a new example. I would like the div to move from section one to section two. But div takes position elsewhere even though it's contained in section two. @GreenSock https://codepen.io/FilipGC/pen/vYJReMB

Yes, this is exactly what I would like to do but I would like to keep the div in center (50%) position of viewport height. In place where is scroller-start. Setting for example "end: +=1000px" is not the good solution. @GreenSock

Hi Cassie, Unfortunately this plugin is paid I updated the example with gsap code. After scrolling, I would like to move the div to the target position and not just change its dimensions as it is done so far. Div stays in position top: -300px; left: 500px. I would like it to take values as in the 'visible' class

Hi, I want to smooth move down div with class ".box" using ScrollTrigger with "pin" value from changed position values (top and left) to base div position as in ".visible" class. I spended many hours working in this case and I still don't have any idea how to do it. The starting position of the div is changed and I would like it to move pinned down and take the base position when scrolling at the end. Please help