tomekk

Hi there im trying to get an animation done. I did create an simpler codepen. Let me know, if something is not understandable or if I can give more details on that thing. I will try to explain: I do have a lottie animation, which is hooked up with scrolltrigger. Now I am trying to get the duration of that animation handled. What i try to do is 1. start the lottie animation, when the image part title comes in. (solved) 2. end the animation, wenn the "image elements top" hits the "lottie elements bottom" (not solved) Additional to that, I do pin the "lottie element" and i give an parallax animation (y: 100) to the "image element". Do I miss something and its totally simple? or do I need to do more complex calculation and thats an advanced thing? thanks in advance Tomekk

Hi ZachSaucier thank you so much for your reply and the solution to my problem. Yesterday, when I was reading the common scrolltrigger problems , I didn't see the mistake I made. I think that I did fromTween mistake instead of using the fromToTween (so the scrolltrigger used the last css value before the refresh, right?) With updating the progress of the timeline to the progress of the scrolltrigger, the fromtoTween is set to the beginning, when the window is resized, but the scrolltrigger isn't active. Did I understand that right as well? Thank you so much, you helped me a lot and I learned something again. Enjoy your evening, Tomekk

Hi there, i know, there are some other threads around which are similar to my question (or even the same) but i dont understand how i can solve this: What i want is the following: In short: curtain-Like animation -> update the timeline's inset value from the image on window.resize() to be equal to (window.width - conatiner.width)/2) The first image after the first text should get an css inset left/right. On scroll the image should pin at the top and the inset should get smaller ("curtain-like"). This works like i want it to be. The only thing i dont understand ist how to recalucalate the inset value on resize and update the timelines from value and/or the scrollTrigger. I already found threads where its explained, that i should use function based values, then i should use invalidateOnRefresh on the scrolltrigger to update values. Is this correct? Anyway i do not understand how i can handle timeline properties and scrolltrigger in the responsive way, if i need to rely on other elements on the page (e.g. width of container) I have also added 2 screenshots to clarify my problem after resized window. Hope someone can help me out here Thanks in advance Tomekk

Hi Zach thats exactly how the animation should behave. Thank you so much!

Hi there thanks for your reply Zach i have attached an example of the document and the viewport with items in red and green. Red item sshould not be triggered, green items should be. Is it clear to you what i am trying to achieve? scrolltrigger.pdf

okay i tried end: "bottom bottom". but still the elements get triggered to fadein and translate. I am trying to get only those elements animated, that are beneath the viewport or partial inside the viewport (only from bottom). If an element would be totally in viewport or above the viewport (from bottom) that element should be ignored from the animation and the trigger. Maybe its my job to filter first the elements and then apply the animation. I was just wondering if there is something biuld in for not determining it manually. So with the solution you provided, the only thing that is not fitting to my situation is that elements, that are initially inside the viewport get the animation applied. i want them to be already at the end of the state of the animation if there are completly in the viewport/or above in he beginning when the page has loaded.

Hi Thomas, thank you for your quick reply and the solution for playing the animation only when its not above the viewport in the beginning. Is there also a solution for elements that are inside the viewportat the beginning (not only complety above the viewport)? Or am i using the wrong technique or totally missunderstand the Scrolltrigger thing?

Hi there, thanks for the examples above. I'm trying to setup something similar. The difference to the above code would be to animate the elements only if there not already in or above the viewport. I need this for the case, if someone refreshes the page. In the above examples the boxes won't appear if they are above the viewport. To recreate that case use the codepen from @Macmac: https://codepen.io/Meuss/pen/eYJZbJN 1. fork it 2. run in debug mode 3. scroll down (so that a few "boxes" are above the viewport) 4. refresh the page 5. scroll up to see that the boxes stay in the initial state of the animation I could check the elements before applying the animation if they are above or in the viewport and then remove them from the list of animating elements etc. But is there somehting build in for that? Am i missing something here? Thank you in advance Tomekk

Hi Jack yes, thats exactly what i am trying to get solved. Thank you so much for your well explained answer. And also its really great, how fast you guys reply!

Hi jack, thank you so much for your reply. Yes its close to what i meant. In detail what i am trying to do is the same as what "position: sticky" does. In your example the sticky-container is overlapping the content before itself, when it reaches the position before the footer. I thought maybe theres a way with scrollTrigger, that it will preserve the space where the sticky-container will be without "position: fixed"... (and recalculate that in smaller screensizes). Do you understand what i mean? Heres an codepen/example with "position: sticky" and without gsap: https://codepen.io/tomsquared_tomekk/pen/GRoqaQb Is this posibble with scrollTrigger without realculating the space manually for the sticky-container that gets "position: fixed"?

Hi there, first of all thank you so much for having gsap and all the plugins to use!! Especially the scrollTrigger Plugin! Thanks for all that work. I am totally new to the forum, this is my first post, so hopefully i am doing everything right. If not, please let me know :). I am thinking of a case where i do have some content. After that something like a pre-footer-section (like a second navigation) and the footer itself will follow (see the codepen i provided). The pre-footer-section should stay sticky until its ghost appears and should then scroll up with the rest (like position sticky does). Is it possible to get that done with scrollTrigger? (i could use position: sticky, it would be perfect for this szenario, but if you need IE11 it will break...). Thank you in advance for your help, tomekk