Garavani

Thank you very much for these clarifications! Indeed, normalizeScroll (almost) did the job for me. Had some issues after with fixed containers on the start of the page that before weren’t a problem. But I solved them in another way (scroll independent animation at the start). Thanks so much for all the work and the grey hair due to Safari. I can imagine the trouble. Keep on! Best, Stefan

Hello GSAP team, thanks again for your awesome library! May I jump in here regarding the iPhone scroll issues? On this page: https://greensock.com/docs/v3/HelperFunctions#getScrollLookup we have the Stop iOS Safari from resizing the window on scroll section. 1) is this supposed to work, though? In my case it caused all kinds of unexpected behavior, added white spaces on scroll trigger pin sections etc. (Unfortunately a minimal demo cannot help as my html structure is complex and it might be the reason, too) 2) When I have, let’s say a typical kind of Wordpress page structure with internal post main containers etc. can I use those or does the container you describe there need to have the exact naming of “#viewport” (maybe there is something under the hood where it is used as a specific selector?) 3) In the very section before Stop overscroll behavior, even on iOS Safari you describe usage of the function. Is this function maybe a necessary requirement to make the CSS code mentioned work? For as I said in my case it destroyed everything. Thanks in advance for clarification! Best, Stefan

Thank you Cassie! This helped a lot. In fact I came to this in the docs after I understood where my problem was. And sorry for having stepped in this topic that in reality hadn’t much to do with my problem in the end. So for me it is solved!

I found the answer to my troubles in the answer of OSUblake in this thread: I was never aware that we need to “sort” the timelines in the code according to the real succession on the site! However, so it becomes hard to do forEach loops with timelines if you have different animations in between them… Let’s say we have in a page layout: 1) section [timelineType1] 2) section “some specific individual timeline” 3) section [timelineType1] 4) section “some other specific individual timeline” 5) section “and another specific individual timeline” 6) section [timelineType1] We’d have to repeat the code (const = gsap…) to be able to place it in the correct order…

First of all: great library, great support! Sometimes, though, it is too hard and time consuming to REbuild an issue that most probably will not even persist in a totally new minimal demo environment. I simply hoped that any hint on this “height/spacer” remark could give me an idea. Anyhow, thanks a lot! I will go on doing some research.

What exactly do you mean by that? I am having actually issues with forEach timelines which are triggered too early maybe due to the fact that previous sections are pinned with end: +-400% and stuff like that. Very hard to understand the logic of gsap looking at the browser console when everything is wrapped in these pin spacer containers.… Fact is that sometimes timelines get triggered before the trigger element actually enters the viewport.

hahaha, guess you are right about the loading. This is what I meant in reality. Also me doing usually some preloader cover or similar. Thanks again for your quick and precise return!

Hi Cassie! great, this works! (by the way, I wasn’t really aware of this fromTo stuff). However I had to leave the transform: translateY(calc(50vh - 45px)) in my CSS too, otherwise on page load (as this section is the first) I had a little jump, most probably the time gsap needs to calculate the position in pixel. I guess this could be also resolved by doing some “init” magic with gsap, right? However with the CSS rule left in place it works perfect, so why change that?… Thank you very much for your quick reply! Best, Stefan

Hello, seems that I cannot get ahead with the invalidateOnRefresh mode. I want my logo (red rectangle) start scaled and vertically centered and then scale down and move to the top into the header area on scroll. In my scrollTrigger timeline there are also other things that happen so I need to have that timeline. What I achieve is the choice between 2 things both not doing exactly what I want. invalidateOnRefresh: true does nothing. If I resize the window the centering via CSS is no longer respected (I understand that gsap overwrites and memorizes it for performance reasons). If I add the onRefresh part (commented out in the Codepen) the resizing works centering the rectangle correctly, but then starting the scroll makes the element position wrong again. I need both, though! Thank you in advance! Best regards, Stefan

I think this is a really good way to go! Thanks again! I cannot even imagine how complex all this under the hood is. Really stunning piece of work GSAP!

Sounds interesting! Thank you! However, in my designs I try to avoid at any cost using pixel measures. Not responsive, is it?

However, one could say as an essence of your descriptions: the more animations we have in one scrollTrigger timeline (with default duration 0.5 or whatever) the faster they will animate as they “share” the total amount of “time” (which really isn’t time in seconds) given by the distance of the trigger element. So my first impression wasn’t wrong indeed. Could result complicated doing some reliable math here. Isn’t here something that could say: the tween of element X has to cover XX% of the distance while other animations remain untouched? And, respectively start at XX%… Just wondering…

Hahaha, even more weird now. But I will get closer step by step! Thanks!

Hi! First of all, thanks for your super quick response and also the helpful notations! Second, sorry for the missing CodePen. Promise that the next question will have one! Third, actually, after a while I saw that my impression of a first animation with less time at disposition was an impression based on my confusion in understanding the meaning of time (as you say: “1 second” i.g) when having a scrollTrigger timeline (and, in addition with pinned section). As there is actually no time “passing by” but user scroll distance, at least for my feeling. When I started one of the later animations after “1” let’s say at “1.5” the whole animation (or better the scroll) took longer, so the first one seemed faster. So, yes, all was meant as it actually is. Even if it would have been sure better for understanding ordering the timeline chronologically. (But as I understand it, it is not really relevant for the flow of animations, as the starting times are absolute.) However I am still experimenting and having kind of a hard time to deeper understand the concept of “time” on a scrollTrigger animation. As said, what is 1 second? What part of the scroll distance does it cover in reality? and so on… Anyhow, great software, great support, thanks very much! Best, Stefan

Hello all, hopefully this can be answered without a code pen as it is (I guess) a quite simple and generic question. I have the following scrollTigger timeline: const image2 = gsap .timeline({ scrollTrigger: { trigger: "#image-2", pin: true, scrub: true } }) .to(".top-color", { "--r": 73, "--g": 57, "--b": 51, "--a": 0.77 }, 0) .to("#image-2 .dimmer", { "--gradient-middle": "25%" }, 0.5) .to("#image-2 .dimmer", { "--gradient-alpha": 0 }, 1) which works well. Animations expanding while the #image-2 is in view. They should run from 0 to 100% of the timeline. Now when I want to add other animations as the ones in italic: const image2 = gsap .timeline({ scrollTrigger: { trigger: "#image-2", pin: true, scrub: true } }) .to(".top-color", { "--r": 73, "--g": 57, "--b": 51, "--a": 0.77 }, 0) .to("#image-2 .dimmer", { "--gradient-middle": "25%" }, 0.5) .to("#image-2 .dimmer", { "--gradient-alpha": 0 }, 1) .to("#detail-image-1", { y: "50vh" }, 0.5) .to("#detail-image-2", { y: "-30vh" }, 0.5); The new ones work as expected, too. Only that they steal seemingly the time the first ones had to roll out completely. How can I avoid this? The first ones should always work, let’s say “in background” while the other ones above an be added without interfering and not shortening the times. Many thanks in advance!