Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'pin'.

  • 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. I'm working on something that look similar to this codepen [locomotiveScroll + ScrollTrigger]. All scrub and pin work perfectly on orange section until I add "once:true" this will leave white space 100% viewport as we setup in end parameter and push orange section under pin's whitespace. I believe that this is how scrub and pin spacing work. What I really want to do here is to improve UX in my app by stop scrub animation when it onComplete or play animation once just like how I add "once:true" but want to acheive this without pin's whitespace. I'm not sure about the pinType either since I use locomotiveScroll with scrollTrigger, this force me to use pinType as transform instead of fixed. I have tested it without locomotiveScroll but whitespace still remain so I believe it's not the caused of whitespace. Any suggestion on this? Thanks in advance
  2. I'm trying to use different components with ScrollTrigger, but I don't know why the calculations don't work and I don't know what I'm doing wrong If I use the components separately it works, but together it doesn't... Can anybody help me? Thanks!
  3. 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 !
  4. 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!
  5. Hello everyone! I started using scrolltrigger to make a nice scrolling website for a client. In the header section, I want the animation tu run on scrub but not on backwards scrub, so I killed it onLeave. The problem is that when the animation is killed a large black space is left above my header section. I tried making it the same as I have it on CodePen but I failed.. hope it's understandable this way. Thank you in advance!
  6. Hello, i'm trying to make a hash link to work with ScrollTrigger and the pin functionality with no success... When the trigger is reached, an element containing the whole page is pinned, to stop everything during the animation. It seems that the link is pointing to the original location of the element (before ScrollTrigger resize the pinned element). I tried to locate the position of the element in the dom with element.getBoundingClientRect() to perform a scroll with window.scrollTo() but same issue, it returns the original location. How can I scroll to an element that is contained inside a pinned element? Maybe I'm pinning the wrong element?
  7. Hello, I am creating a multi-panel scrolling widget using the GSAP ScrollTrigger and ScrollTo plugins. When scrolling past the 2nd panel, I use ScrollTrigger to pin an SVG, and ScrollTo to override the snapping behaviour. I'm encountering a slight jump on the initial pinning of my SVG and am not sure what the cause is or how to alternatively smooth this out. My Codepen example isn't too bad, but still noticeable, and if i were to add more content the jump/glitch becomes more prominent. The Codepen example is identical to my project's widget markup and styling. If there are any questions or context needed, I can provide it in this thread. Thanks
  8. Hello @GreenSock community, There are two issue i am facing in scrolltrigger animation. 1) In codepen link you can see the full page site. I need on scroll flip animation. <div class="card"> <div class="face front"> QR img </div> <div class="face back"> normal img </div> </div> on scroll first front section visible. After amount of scroll front will change to back face img. After scroll to next section (IDC FEATURES) it's move to back img. Bottom attact img are backface img. 2) Back face images are visible on bottom of section. It's jump to bottom as per screensort. If you scroll to bottom you can see it's jump to bottom. Is there any solution to fix this images movement. After animation section scroll to bottom. thanks !
  9. My goal is to create an effect where I reveal a section with horisontal scrolling sections. Though the horisontal scroll should not activate before the last cover has been scrolled away first. I have create a screen recording of the desired result here: The problem I am facing is that the horisontal scroll behaviour is initialised before it is visible, so one can never get to see the first slide.
  10. I've been working on an idea similar to the one in this codepen and I have been wondering what is the best way to remove the pin animations from recurring on reverse (scrolling back up)? So ideally, I would like for the text to remain visible and the coloured images to stay in place while scrolling back up the page. I understand the use of tl.kil(true) inside of an OnLeave() event (or maybe I don't) however I still have to remove the extra padding/spacing created by the pins as well as on the parent container that gets generated which means I also have to reposition the block to the top of the viewport (scrolljacking) which devs always try to avoid. Also, I am including ScrollTrigger.refresh() to re-calculate the starting positions of other blocks of the same type on the same page. Thanks for this insanely good product, I always enjoy browsing the forum for ideas.
  11. Hello, I want to do more than one pin operation, but it does not give a proper display in the second iteration. I want to see the visual content again after the pin content and then pin the content again
  12. I have created an animation where elements transition in a header div at the very top of a web page as soon as the user starts scrolling. The container is pinned until all elements have finished transitioning, however there is a lot of white space under the header div that decreases as you scroll. I understand this is there because of end: "+=250" - if I change this to 0 the white space is gone but the animation happens far too quickly. Please see a stripped back version in the codepen (view full screen to get the full effect of the white space). How can I keep the header pinned until the elements have finished animating, but have the rest of the website content in view and fixed in place as normal?
  13. Hello, the structure i want to make is actually auto height at the top and layers from the bottom, and then the last part is independent of the layer. For this I am sharing the image
  14. Hello, there is a reference scroll animation in the codepen link. Here, I want both the image and the caption text to appear as zoom in & out, how can I do that? Fade in & out right now I don't want that. Can you help me?
  15. I tried to pin the current page (div1) and when the next page(div2) will slide up, the current page (div1) will keep going 30 percent to the top, creating a parallax effect. But the problem is, when The 2nd page(div2) pins and 3rd page(div3) slides up, the 2nd(div2) page's parallax effect breaks the whole design. I need help.
  16. Hi, in the codepen example i shared i actually want to do the following. When the image is zoomed, the image goes to the next image and in the same way, it gets visual zoom and its text comes in. Can you help me with this?
  17. Hi, Since I couldn't reproduce my issue on codepen, I uploaded the demo here. http://66design.jp/forum-demo/1/ When I pinned element includes video, this video flickers when I scroll and left the finger from the screen. like this capture. http://66design.jp/forum-demo/1/cap.mp4 it not happens on PC. (not yet tested on Android) Are there any workarounds? thanks
  18. Hello, I wanted to do a development for my own project, but i ran into a problem. i am using Luxy Smooth Scroll in my project. I wanted to change the image by scrolling with the gsap pin, but Luxy Scroll is causing a problem and I couldn't solve it, can you help? This is my reference codes https://codepen.io/Danish_Khurshid/pen/jOByPGq
  19. I'm very new to GSAP and I tried to follow a tutorial and some demos however I couldn't get the results I wanted. I wanted as the user scrolls down for '.container' to be pin when it hits the top of the screen. So I set start to "top top". And when the user scrolls to the '.container' for the first '.panel' to already be displayed. I believe that part is working as I wanted. When '.container' is pinned, as the user scrolls, for each ".panel" moves into view and snaps into place. I think this works correct. However, It's not working the way I want it to look. I want the text inside '.panel" to be displayed in the center of screen / '.container'. But the only way I could get this scroll effect to work was to make the height of '.container' greater than 100% like 600vh. Oh and because I made it 600vh. There's extra whitespace at bottom. And I want to make sure everything is dynamic as possible. I also want it to snap to be more smooth or instant. There's a bounce there that I don't know what is causing it. How can I fix these problems. Is there a better way for me to set up animations.
  20. Hi, I have a pinned section that when it gets to the end of the pinned section, I want it to stay pinned while I pass the active class from one div to another via user scroll or a timer, when it is passed to the last div I then want it to un-pin and continue on down the page as normal. Has anyone done something like this or have seen an example they could point me to? I appreciate your help!
  21. I am trying make my Sections Scroll through like in this example, but i want to extend the Time between Sections, aswell as have two Sublines. So if i enter a section the Headline and the first Subline is revealed and if i scroll more the first subline is replaced by the second Subline.
  22. Hi, I want to create a carousel slider (200x100) that will animate on scroll. I am not an expert and still trying to figure out GSAP. I want to pin the section which will contain the carousel as the user scrolls down. Thanks in advance :D
  23. Hey guys, Started playing a bit with ScrollTrigger and loving it, great job! Is it possible to pin elements taller than the viewport and make them scrollable though? Like this: https://abouolia.github.io/sticky-sidebar/ check out the "Scrollable Sticky Element" example, try scrolling up and down to see what I mean. Fingers crossed
  24. Trying to do a few things here and it seems I am close but not quite there yet. Certainly my lack of experience with GSAP is one thing standing in the way Hopefully someone can help, with either some input on what to change or perhaps a working example I've somehow missed. What I need this to do is animate according to the attached image (below). Where the panel slides in from the bottom as opposed to what it's doing now where it wipes upward and reveals from behind. I need it to slide in from the bottom and go upwards overtop. Also, when you get to the last two panels, rather than the second last panel (panel 9) moving up and leaving a blank space, I want it to just end the scroll animation and let the page scroll down to the next section (ending the gsap timeline there).
  25. It is necessary to make that at scrolling of the page at one moment the animation of emergence of the image was started, and at another moment the image was fixed and changed during scrolling. The problem is that when I scroll through the image gallery to the end, the block following the gallery overlaps the gallery.