Jump to content

Search the Community

Showing results for tags 'pinning'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hi, I've been reading the docs/tutorials on scrollTrigger, but for the life of me I still can't get control around the spacing added when you add a pinned element. I get the concept that scrollTrigger adds extra space for the pinned elements, but I'm trying to create a site with pinned elements and I'm struggling to have items positioned correctly. In my codepen example I have 2 'motif' elements and 2 'circle' elements. The circle elements are both pinned but are pulling the second motif animation markers up causing it to animate to early. You'll see in the code pen I've added the markers, so you can clearly see the 2nd 'motif' element markers are out of place, instead of inline with the 'motif' element, and I've also added a background color to the pin-spacer to try and visualise the extra space. I'd like both 'motif ' elements to behave as the first one is. Any help would be really appreciated and any explanation on where I'm going wrong too. Thanks in advance.
  2. Hi there I'm using the scrollorama plugin to achieve some fairly simple pinned animations, and the plugin works extremely well. However, I'm trying to use the scrollTo plugin to provide a simple navigation for users to scroll with animation to the critical point in each animation, and this is the part I'm stuck on. If anyone can provide any guidance on how to determine the way to scroll directly to a certain point in a pinned animation, I'd greatly appreciate it! Thanks.
  3. Hello, I am having some issues with pinning a section (making it fixed) while having a stacking card effect inside the pinned section. The pinned section has an image on the left and the stacking cards on the right. I want that whole section to be fixed as it scrolls to that section. The image on the left should still be show while there is a stacking card effect on the right. However, when the parent container is pinned, the stacking card effect isn't working. When I remove the pinning codes (for the parent container), the stacking card effect is working fine. What is the issue? How can I pin a section while having the stacking card effect inside that pinned section? I am using these urls for the stacking cards effect: https://greensock.com/forums/topic/33597-stacking-cards-overlap/ https://codepen.io/Mohsen-Khakbiz/pen/WNzBrdz https://codepen.io/GreenSock/pen/MWmVwpX Thank you!
  4. Every time Pinned section appear gsap add extra css code shift that section to right
  5. Hello everyone, I need your help to code this scroll logic : change one pinning element allowed active state by scroll. When I scroll, state changes and updates image in both sides allowed. By details, when I scroll down, the element below will be active and drag to change the corresponding image to the right, otherwise when scrolling up, the upper element will be active and drag to change the image, when clicked on any element on the left, the image will also be changed according to the active element (similar to scroll), and if the first element is active, we will be able to scroll to the top of this section. This is sample link : Ngân hàng di động MyVIB 2.0| VIB I want to use scrollmagic or maybe gsap or intersection observer, thank you.
  6. Hi, in the example i have cards with two trigger each card. First trigger scale the card and the second trigger pin the card. When I've added ScrollSmoother the start and the end of the scale trigger generates the issue and only the first scrolltrigger correctly works. Any help would be greatly appreciated. Thanks
  7. I am trying to pin section when section reached top of the window in react but it's doesn't works! but also use same logic for html file it's works. Please help me find out my it's not working in react. react file link :-https://codesandbox.io/s/pin-using-gsap-in-react-imqkh9?file=/src/App.js:358-376 html file link: - https://codesandbox.io/s/cranky-darkness-le0ic1?file=/app.js
  8. Hey, Love your work Greensock! I need a little guidance/ advice The animations work as intended, the issue is regarding the text inside the left hand image panels; specifically their behaviour when scrolling up the page. Effect is best seen on larger screen sizes I'm using css flex & position sticky to "stick" them to bottom of their parent, greensock just reveals them at the correct time. All works on the way down, but as you scroll back up weird things happen to the positioning of the element. I'm hoping somebody has a simple solution, as it is very close using this approach. Alternatively could use green sock to also handle the pinning Many Thanks
  9. Hello everyone, This is a reformulation of a topic that I created a few days ago. I am creating a new one here because I think it is more a ScrollTrigger+React-related problem and that it might benefit from being referenced as such. Context There are two consecutive "sections" that are both a 100vw/100vh. Each section is a React component (in the CodeSandbox below, they're called respectively WorkOverview and HomeAbout). They both get pinned one after the other. Problem The second element gets pinned too early, exactly as if the padding of the first section's .pin-spacer wasn't taken into account. The weirdest thing is that it doesn't happen all the time (but must of the time). Please note that (1) the ScrollTriggers are created in the order they happen on the page and that (2) it is not caused by any asynchronously-loaded content on what the sections' sizing might rely (images are inside a pre-sized container). Here's a video that illustrate the problem: Here's the CodeSandbox link https://codesandbox.io/s/clever-rhodes-16ic1. Note: if you don't see the problem, refresh the page 1 or 2 times. Thanks in advance for you precious help!
  10. Hi, I'm currently working on an animated landing page based on scroll triggered animations. I have a 'hero section' which has elements animating within it (tree, decorations, etc), these need to animate while the 'hero section' remains pinned while the user scrolls to progress through the animations. My issue is that I cannot scroll when hovering over the hero section when it's pinned and for some reason the container is having "top: 172px" added to it. Somehow the scroll works well when scrolling on that additional grey area (which I don't intend to have as I want the hero section in full height), and the scroll on the hero section doesn't work. I tried adding "z-index: -1" to the hero section and started the pinning trigger at "start: top -20%" then it works as a workaround (source: "https://codepen.io/stevencamilleri-mrg/full/MWvXVNB"), however with that the button inside the content will not remain clickable anymore. Can anyone look into what I might be doing wrong? The idea is to have the user zoom in/out the tree with different content and decorations showing up. PS. I would suggest viewing in full view on Codepen in desktop
  11. Hi, First of all thanks a lot creating super animation library. I am newbie here. So i am facing the issue related to Pinning and Scroll Snapping. Here is the CASE. So there are a big image which will be first pin on first scroll once user scroll more that image will be go towards left and fit as per given the X and Y values and once it sets the summary text is appearing so this is the main issue here, I have used the CSS properties for scroll snapping but when that summary screen appears the page scroll is locking and once the summary divs are finish the the page scroll is stuck until we move our cursor. I tried to achieve the same effect using snap but no luck. Please help me. thanks in advance.
  12. Is it possible to pin a section within horizontally scrolling container? I know I can "fake" it with a timeline, but was wondering if there is a more automated way.
  13. Hello everyone! I'm working on a website with layered pinned animations. The main animation is working well, however I would need to make possible that the first two sections (with a different class and nested content with a mask) works as layered pinning but with an inverted behavior. In few words: generally layered pinning make NEXT layers to overlay the PREVIOUS, while I need the FIRST section overlay the SECOND, keeping the snapping effect. After this specific animation, the next pinning animations should work as usual. I tried to use this snippet to control the zIndex of the first two sections without results (the animation breaks and restarts every time from top): gsap.set(".panelz", { zIndex: (i, target, targets) => targets.length - i }); where ".panelz" is the class of two nested sections inside the first main section. How can I solve this? Thank you in advance and have a nice day!
  14. Hello, I'm currently working on a personnal project using your new super plugin Scroll Smoother, and I have a little problem. I made a simple codepen reproducing the situation I am facing in the real project. What I want: Keep the lag effects active on the letters while the container is pinned What is actually happening: The lag effects are disabled once the container start to be pinned - I know it's for optimization purposes, since the element should be out of the viewport if it wasn't pinned (see the "gost" element on the demo, lag effects stop once the ghost element get out of the viewport). But I want to keep thoses effects enabled. Is there a way to do that ? Thanks for your help !
  15. Hi everyone! There is a working script for scrolling news. But the question is how to upload new news, or search for news, if I can not update ScrollTrigger? Trying ScrollTrigger.refresh(true), in documentation effect that I need, but in action I have nothing. So when we click on the "View More"-button we adding new content to list then trigger ScrollTrigger.refresh(true), and scroll positioning should be recalculate, but it does it incorrectly, at the output we have that it does extra scrolling, and at the top we have not 0 but ~-2000px(depends to screen resolution) Maybe I'm doing something wrong, maybe in the wrong sequence? Maybe I'm missing something .. Thank you very much in advance!
  16. I have a section with the height of 100vh and pin it as follows: ScrollTrigger.create({ trigger: ".styleselectcontainer", start: "top top", pin: true, pinSpacing:false, }); Directly after that follows the next section with normal scrolling. How can I control that this section does not scroll directly above the pinned section when the pin fires? I want to achieve that the user has to scroll/swipe a little bit until the second section starts scrolling.
  17. The GSAP plugin is amazing, and I've had some luck implementing some things on various sites. However, I'm trying to design a section for my new website, and I'm running into a wall. I've reviewed several CodePens, and done a ton of Googling, but I just can't seem to combine the various demos I've found. The demos I've tried to work off of include: https://codepen.io/akapowl/pen/abmpGQv/d076a9cf4c1a952a0bc921a76bc2202f (Fake Horizontal Scroll with Fake Pin) https://codepen.io/GreenSock/pen/YzygYvM (Horizontal snapping sections) https://codepen.io/GreenSock/pen/ZEpNLZa (Animate horizontal sections) The idea is this: the user scrolls down to this section. The section is pinned in place. As the user continues to scroll, the first "tab" delineated by vertical dashed lines scrolls into place overtop of the Digital Marketing tab. The content in that tab is scrubbed in with opacity changes, or perhaps with a toggleClass on that tab. Once that tab is revealed, the next one slides into place, and so on until each tab has been revealed, at which point the pin is revealed. When the user scrolls back up the page, the whole thing goes in reverse. As you can see in the CodePen I've submitted, I have made some limited progress, but I can't seem to get it to go full width. I also don't understand how to apply this successively to each tab, one over top of another. If anyone could lend a hand or point me to the right direction, I'd appreciate it very much.
  18. Hi, I am trying to scroll the contents in the text-block while pinning the parent. But as you can see in this demo the scroll is taking children of both the parent divs. I want it like once the first section i.e {.phone-text-scroll-block} has finished scrolling the other {phone-text-scroll-block} should come as a pinned layer Like this example and then the same animation repeats as the first one. Please help me. Thanks
  19. Hi everyone, I'm wondering if any of the geniuses on this incredible forum could potentially point me in a direction to possibly modifying the ScrollTrigger Layered Pinning Demo (https://codepen.io/GreenSock/pen/KKpLdWW) to behave to something similar to this: https://gmeadow.com/ I can see that https://gmeadow.com/ is actually using GSAP and ScrollTrigger but I have no idea how to achieve some of functionality they've implemented (i.e. scroll-jacking/locking, parallax effect on section transitions etc). Any help or pointing in the right direction would of course, be greatly appreciated. Thanks, Dayne
  20. Hello, Is it possible to update/refresh the .pin-spacer element height when the pinned element height changes ? You can see on the Codepen demo, when the lightgreen element (.container) is pinned, the padding is decreased, so the .pin-spacer appears behind (green). I would'nt see that element behind, i would the following element .content stick to the pinned element. Thank you for your interest about my problem
  21. Hello Everyone, Hope you guys having a great day. So, here i am trying to achieve pin scrolling form left to right and right to left achieved nicely by @akapowl using locomotive scroll and how to make horizontal scroll section to display vertical on mobile and display horizontally at tab and desktop. and if i want to achieve horizontal scroll at mobile then this will be kind of bad for user experience as it will cause problem to scroll. https://codepen.io/akapowl/pen/8a383f202ba53d6b11cc83da39b6f5b5 I want to achieve left to right in second section and want to make them display vertical on mobile coz its overlapping
  22. Hi there! Thanks a lot first for creating this library! I am only starting to using it more often but love how easy it can make powerful, performant transitions. This is my first time using ScrollTrigger however and I am unsure how to use it in a good way for my use case. I've spent a few hours on trying to put this together but did not get it fully working and hope that some of you can guide me in the right direction. What I am trying to achieve Once Section Two ('section .two') reaches the middle of the viewport it should be pinned. After that the text elements on the right of Section Two ('.stepped-animation .single-step') should fade in / out one after another when I scroll further. There should be a "direct" transition to the next text element, meaning for example it shouldn't stop during animation at opacity 0.5 of a text element (I tried to achieve this using snap). The last one should stay visible when I scroll on. After the last text element is shown and the user scrolls further the Section Two should be unpinned and it should scroll on further to the next section (no need to snap to the next section, just go on). What I could do so far As you can see in the codepen I've somehow got it to work, but: I've manually added the transitions for the text elements and durations (see stepsTimeline) which is not a plausible way The number of text elements can vary. Somehow the whole Section Two now also snaps in place, which is not really what I intend. It should just normaly scroll into place until it is pinned without the snapping. Less important, maybe a second question: I would like to get rid of the white space above / below the pinned section but also do not want the following content to go under the pinned section (what happens when I disable pinSpacing). A few thoughts on how I tried to achieve the solution Two scroll triggers: - one that pins / unpins the Section Two - one that goes through the text elements and shows / hides then when the time is right I feel like there is probably a better way on how to setup the whole thing and maybe use ScrollTrigger it in another way combined with timeline - but I cannot see it 😓 Thanks for any help! Aaron
  23. Hello, I have a question although I don't know if I can't find the answer here but I thought I should give it a try since I exhausted all other options. I have an image/video that needs to be pin and it's going to be move to another section, so what I need it's to be able to un-pin the image once the center of the image/video hits the center of the content of the section. The problem is that the image can be larger or smaller depending of the size of the screen (since it's inside a grid) so I don't know how to calculate this so the centers always meet regardless of the image size. Any help would be appreciated
  24. TrulyNewbie


    Hi, newbie here. I'm desperately trying to figure out how to pin the second div to the top of the screen, beneath the first div, then releasing it as the div above it ends. Just like - https://jeongsteph.design/ I've tried toggleclass too but I just can't get it and I don't know where I'm going wrong. Please help me Thank you
  25. Hello devs , i'm trying to implement smooth scroll and scrollTrigger pinning on same view port. As the smooth scroll works by disabling scroll and translating -Y , pinned div also translates instead of pinning. Reference : https://codepen.io/wooooosky/pen/LQNZgv Can anyone give me a solution , would be helpful. Thanks in advance.