Krishnakant

Hi, Thank you again for clarifying on the issues in the implementation of logic. The solution works well in the CodePen, but I observed a strange issue with Pinned container in my actual project. Unfortunately this does not happen in CodePen and I don't know how can I explain it well enough for you to understand. But let me try. Whenever I am scrolling with container pinned, and like 1 or 2 of the 4 cards have already animated (to the top), if I refresh the page at that very point, and when the page reloads, it doesn't seem to start from that particular point - say for example, when container gets pinned and all the cards animate to the top with stagger, and then I scroll further to animate first card to the top, then I refresh the page, it logs card's index "0 enter" but the card will be still there. And when I scroll further, the next card starts animating with the first card still there. To investigate on this issue I commented out all the code keeping only the pinned trigger, initial set method for cards and the main ScrollTrigger for staggered animation of cards like below mentioned code. To my surprise, this didn't work as well - it works fine when I have not scrolled to the pinned section and reload, but when I try to reload the page after scrolling into the pinned section the trigger markers jump to some unimaginable point(usually at the very top of the page), not at all at the same point before reload. And the cards animation stops there because the it will never hit the trigger. Upon carefully observing this, I saw a strange jumping behavior of scrollbar thumb whenever page reloads, it goes up once and then come to the original position or vice versa sometimes. In CodePen it always stayed at the top on refresh, although I don't have any specific code to scroll to the top on reload, but this is how it is. To check it further, I commented-out the pinned container ScrollTrigger and the reloaded the page - to my surprise, this time the scroll thumb was not jumping up and down at all, it stayed there no matter whatever the scroll position is. So, pinning the container is causing the issue here. I hope I made myself clear about the issue I am facing here, unfortunately I am not able to show this very awkward behavior with pinned sections. And I do not have any clue on how do I resolve this. Please help. ScrollTrigger.create({ id: "pinned", trigger: '.pinned', start: 'top top', pin: true, end: "+=" + pinDistance, }); gsap.set(cards, { y: 1000, rotate: (index) => -angle * index, zIndex: (index) => cards.length - index, }); ScrollTrigger.create({ trigger: '.cards_wrap', start: 'top top', end: 'bottom bottom', // markers: true, onEnter() { console.log("enter"); gsap.to('.card', { y: 0, duration: 1, delay: 0.5, stagger: { amount: 0.5 }, overwrite: true, }); }, onLeaveBack() { console.log("leave back"); gsap.to('.card', { y: 1000, duration: 1, stagger: { amount: 0.5, }, overwrite: true }); } });

Hi, Thank you for clarifying on the logic. Really helpful. However, I want to have the animation of cards to be sequential rather than overlapping as I said. I want the cards to animate from bottom to start with (when scrolling down at some point) and then drift away one by one to the top after a short pause. And reverse the same when scrolling up. That's why I thought of toggleActions which could work in this case. But your code/logic made me think further to use callback functions (with custom logic) - which I am not familiar with at the moment. I will have to think again on, when to use callbacks and not toggleActions. Anyways, I will implement it in my actual webpage to see if it resolves the inconsistency. Further, I observed that sometimes (when scrolling fast from top to bottom and further up) one card remains there (the top one, which is not what I want) - and sometimes it doesn't, exactly at the same scroll position. Please have a look at these screenshots to know what I mean. https://ibb.co/3chg18S https://ibb.co/qMyMxd8. Do you think this is a issue with logic or something else? Please guide me on this, appreciate your help and patience in explaining the concepts. Thank you so much.

Hi, I am struggling to get this right - its very frustrating to see the animations behave in inconsistent manner in this scenario. I have a pinned container with some cards in it. I want to Animate the cards initially to show up at some point (after the container is pinned) without scrub and with stagger. Animate them one by one from the previous state, after a brief pause without scrub (based on the scroll position) when scrolled through the pinned container. The issues I am having (although its not visible sometimes in CodePen but clearly visible in actual webpage) are When page is reloaded (especially when in between the pinned container while reloading) the animation sequence either doesn't play at all (cards don't move at all) or very inconsistent. It doesn't start where it left or suddenly jump. The similar things happen when scrolled fast back and forth. They overlap, with the cards placed somewhere in between. (here is a screenshot of the same - https://ibb.co/18nVwtk I am still learning about ScrollTrigger and hence I am not sure what is wrong with my code here, or how can it be fixed. Please guide me.

Hi, Thank you so much - in fact I realized it later to have a master timeline just as you suggested. And yes, the issue of overlapping background color tweens was something which I could not figure out - this indeed is a cleaner solution to both the issues I had with it. Marked it as a solution. Thank you again! This left me feeling like - there's lot to learn about GSAP. Could you suggest any course on GSAP - from the beginner level to Pro? I am very much interested to learn.

Hi, I have a overlay slider animated to reveal next slides. Its bit experimental for now to create something like this - https://in.pinterest.com/pin/422564377554733199/ What I am not able to figure out is - how do I reverse the animations after the last slide. I am not able to think of possible ways after trying almost all possible options. Could you guide me on this?

Yes! Something like this but with some slight modifications. I tried to modify a bit but it the issue of leaving white space comes back again. Basically I want to have all the cards of min-height of 100svh and the first card needs to be fully visible on load. So its not exactly to be visualized as 'stack of cards' with the first one being at very bottom of the stack initially. The cards need to stack but not till all the way till the top of another card. If I modify, it again leaves blank space OR leaves gap in-between - I tried changing the logic (possibly I could think of) but could not achieve it. To add to this - I have one more requirement, and that is to have one slide/card to be sticky (pinned) on scrolling preferably without altering the parallax effect. I have updated it in the same Code-Pen (taking your code). Please take a look and suggest. And thank you once again for your time - much appreciated !

Hi, Thank you so much for your suggestion. I have modified the CodePen - but it still not working as expected. It leaves white space at the very bottom of the page. Can you please look at it and suggest the changes to be done?

I am not able to get this simple thing working. Basically I want to have sections with parallax effect without leaving the space at the bottom of the page. I have the sections overlapped initially. But either they all move by equal amount or leave white-space in-between which is not desirable. Going forward I also want the Orange section to get pinned. Please guide me on how all of this can be implemented.

Okay, does this mean observer plugin is not quite capable of doing such simple thing? Or its not quite ideal to have it in situation like this? I respect the work you have done in developing these plugins, but when it comes to actually using them - we find them to be not practical enough or need to use some other paid plugins. Anyway, it looks like I have to use some other slider plugins available freely. Thank you.

I want to have a simple swiping slides set-up (not on scroll). As you can see there are multiple issues/inconsistencies in this implementation. onLeft Callback seems to be working fine, when on first slide and on last slide and in between slides with smooth sliding animations. But onRight callback is very inconsistent, its animation gets quicker as we slide and it completely stops on last slide. In mobiles where I want the swipe up and down to scroll normally through the sections below the swiping section, but swipe-left and swipe-right actions to be for swiping the slides. This does not seem to be working as expected OR at least I did not find any way to implement it in this example. When I try to scroll down, the slide gets swiped. I am not an expert when it comes to implementing gsap animations but trying to figure-out what I can do with the gsap plugins referring to the documentations. I have been trying to get this right, but could not fix it. Please guide me in the right direction.

Hi, I have a simple CSS grid layout with ScrollTrigger animations for odd and even elements in the layout on scrolling. It works fine initially, but as we scroll down, the animation slows down, and when at the very bottom of the page, it almost stops animating. I wonder why this happens - I want to animate the items evenly without being bothered about scroll position, please let me know how can I achieve it. Thank you.

Hi, Thank you so much for replying back. However, with limited knowledge on ScrollTrigger and batch I couldn't achieve the desired output. I have updated the codepen to use ScrollTrigger to append elements when scrolled to the end of document, however the ajax call is being executed for every added elements and not showing paginated (10 per page) results as it was before. Also, the animation for odd and even elements is not working at all. I am trying to infinitely add set of elements which are paginated, upon scrolling and translate odd and even element after they are being added throughout (without slowing down the translation effect which is observed when document is scrolled after say 30 elements, i.e. 3rd page is loaded) similar to this - https://www.bt.com/about/annual-reports/2020summary/#stories Can you help me with this to get desired outcome?

Hi, I have an infinitely scrolling container which appends elements to the container, after an ajax call. I am trying to fix 2 issues here, as you can see on scrolling to the bottom of the container. 1. I have the even and odd cards being animated separately, but on appending new elements to the container the cards do not animate as expected and go in reverse direction. Also, as we load more and more elements in the container, the movement of cards slows down. 2. On appending elements from next page, some times the cards get overlapped, resulting in not so seamless experience. Please help me to fix these issues with this implementation of ScrollTrigger. Thank you.

Hi, Thanks for replying. In fact I had gone through this example before posting the question. There was one issue I couldn't solve. When Dragging (without Inertia plugin - as do not want to use it here) - once the element crosses a certain point, it needs to be snapped to 'active' position (like it snaps/becomes active when clicked). Also, I have updated the Codepen with Draggable plugin to achieve desired output. https://codepen.io/designjuice/pen/Jjwdxmq But while dragging again, after snapping to a particular slide - it is not animating smoothly. This is probably because of Custom Easing, but I am not sure how to fix it. Could you please update the example to achieve the desired behavior? That would be really helpful. Again, thank you so much for your time. I appreciate it.

Hi, Thank you for your reply. I have created a circular carousel to implement the same functionality, which listens to mousewheel event (and works fine). Here is the demo of it. https://codepen.io/designjuice/pen/Jjwdxmq Although this works fine in all other aspects, I am not able to implement 'Drag/Snap' functionality to this demo, there is some glitch as you can see while dragging and snapping it to a slide that is being dragged (to nearest Slide). I am also not sure whether Draggable plugin can be used in this situation - as I do not have much knowledge on it. Please guide me.