Search the Community
Showing results for tags 'pin'.
-
Hello friends! I wanted to create an animation using GSAP and ScrollTrigger, but I can't. The essence of the animation is that when scrolling, the large picture is fixed in the center of the screen and decreases. Then, when the user scrolls to the section with the slider, by default these slides are transparent. As soon as the user scrolls to the slider, this fixed picture should decrease to the size of the pictures from the slider, and then from 1 fixed picture, 3 others should move out from under it to take the place of the pictures of the sliders, after that the title and description should appear in the slider. I was able to fix the picture, but I can't do anything further. Tell me how to do it. Thanks in advance! That is, when the user scrolls the page and sees a large picture in the middle of the screen, the picture itself should be fixed. Then, when scrolling down, it should decrease (I think it should decrease to the size of the pictures that are located in the slider) Then the user scrolls down and sees the section with the slider. Initially, the slides are transparent by default. But we see a fixed picture in the center (which we fixed earlier). And as soon as it becomes at the level of the pictures in the sliders, 4 pictures should come out of this picture (possibly under 1 large one, place 3 more that will be transparent). And these pictures should be placed in the place of the slide pictures, after that the title and description should appear in the slides.
-
The question about the height of the section during the pinned container animation.
mikhael posted a topic in GSAP
I’m trying to set up an animation for a pinned container. Everything seems to work, but I can’t figure out why I need to set the section height to 100vh more than the height of all the scrollable elements combined. Am I doing something wrong? https://codepen.io/mikhail21990/pen/LEPyrjO -
I've started using gsap about a month or so ago in a nextJs project. It is phenomenal and I'm really enjoying using it, but I have hit a wall when trying to make certain overlapping animations. Here's what I want: - I have 4 containers. A, B C and D. - step 1: Container A is pinned and some animations run inside it. - Step 2: When A's pin is done, B is pinned behind it and is revealed when scrolling down (A goes up and we find B pinned underneath). - When A is out of the view, do some animations inside B, when they're done B is unpinned and by scrolling down C is revealed (kinda like the opposite of step 1) - Step 3: repeat step 1 Each container is its own component. I have done some research and found some threads that suggest putting the containers in an gsap.utils.toArray but I didn't think that would give me the effect I want. Please correct me if I'm wrong. I have made a simple demo that's a bit close to what I want. In the demo A is pinned, but when the pin is done B pushes A up. I managed to make the 2nd step work (B is pinned and when it's unpinned C is revealed) I have been trying to solve this for about a week now without proper results, your help would be much appreciated.
-
Using from animation + pin ScrollTrigger make my div slightly goes to bottom from its default position
arifkrniawan posted a topic in GSAP
Can anyone help me? It's been a 3 days and I can't solve it. I have some problem with my divs, its goes to bottom maybe 50px for no reason. The first image is before I apply my GSAP, and the second one is after I apply my GSAP. Also there is my Codepen, thankyou
.thumb.png.1bcdac6dd86c0a0cb6a80714ef13cd33.png)
-
Hi guys, I’m fairly new to GSAP and could use some guidance on this animation. My goal is to have the hero image smoothly scale up while keeping the title fixed in place until the image reaches 40px below the title, at which point the title should scroll. Here’s the code: StackBlitz Link https://stackblitz.com/edit/stackblitz-starters-ypnbty?file=app%2Fpage.tsx,components%2FHeroSection%2Findex.tsx,components%2FHeroSection%2FHeroSection.css,app%2Flayout.tsx For reference, I’ve marked the viewport area with a light pink overlay in the design. Thanks for any tips or feedback!
-
Hello Guys, first of all thanks for being always there. I again got a small issue where I am stuck, your help is really appreciated. I am using scrollTrigger with pinning an element where there are some animation with timeline that images appear and fade and lastly it ends but while ending the animation gets jerked. I am not be able to share full code and can't make a small chunk, can you tell me why the pin jerks at few places and otherwise works fine. I can share url in DM. Thanks
-
How to change the height of a pinned element when the height of an element inside the pinned element changes
gsap-novice posted a topic in GSAP
I couldn't figure out how to change the height of the parent element when changing the height of a child element in a pinned element. When you change the height of .middle, .bottom gets cut off. I would appreciate your advice. * Environment - Google Chrome 130.0.6723.92（Official Build） - [email protected] https://codepen.io/name-the-sans/pen/dyxmoNz
-
Hello guys, here what im trying to achieve is when scrolling the background color have to be change like in the demo, but the text reveal animation timing is bit off, i tried to make timeline but still its not working as expected, when the background color changes from white to black its needs to fill the full viewport height and only after that the text animation to be stated, and when its fully revealed the .wapper class animation needs to be fill the screen, which is coming from behind the revealed text . the timeline is not working also tried "pin" on the .three section. if someone can help it will be extremely helpful
-
how to create this pinning effect the same as this website https://www.airvoir.com/
-
Hi everyone, I'm working on a project where I'm trying to pin a title during horizontal scrolling. I've successfully implemented vertical scrolling with ScrollTrigger and pin:true, but I can't seem to figure out how to achieve the same for horizontal scrolling. I've provided a link to a StackBlitz project where you can see my working vertical scroll example, but the horizontal one isn't functioning as expected. Any help or suggestions on how to make this work would be greatly appreciated! StackBlitz Demo Link: https://stackblitz.com/edit/stackblitz-starters-zxxdmi?file=app%2Fpage.jsx Thanks so much for your time and assistance!
-
Hi all! I have a block with pin but it stops too late How can i make it to stop on the end of parent block and how to keep that block always center https://codepen.io/Dima34_1/pen/WNVbMMY
-
Issue with Pinned Scene Disappearing at the End of Scroll in Firefox
PixelPerfect posted a topic in GSAP
Hello, everyone! bug report: https://www.loom.com/share/d9ba05f15f274e5893dd3be508b4a41f?sid=2128eeae-0637-4ea2-8156-a1f661973e04 I'm experiencing an issue where a pinned scene disappears at the very end of the scroll on Firefox (you can see it here: https://bonodigital.webflow.io/). This problem does not occur in other browsers. After some testing, I found that the issue is related to the pinType: "fixed". When I change it to transform or absolute, the scene doesn’t disappear, but it causes significant jitter (as shown here: https://bonodigital-008304f56e81b619aff969180bc.webflow.io/home-copy). Additionally, when I use pinReparent: true, the scene doesn't disappear, but because it moves within the DOM structure, the sticky overlay effect no longer works properly. no idea how to fix this? -
Hi Everyone, I'm running into an issue with an overlay panel in a demo I've created. When you scroll down to the overlay-panel, the trigger starts as expected. However, I'm trying to translate a child element by -100%, but the animation doesn't behave as it should. Although I've set the end value to "bottom top," the animation seems to lag behind the overlay panel. I've experimented with viewport height, dynamic values, and fixed values, but I can't get the timeline and the overlay to sync up properly. Since I have scrub enabled, the animation should take the defined time to move from point A to B, but it’s moving much faster than expected. Does anyone have any ideas on how to fix this or what might be going wrong? Here is quick loom of the issue: https://www.loom.com/share/2163b75d6aed464f997fe9bb17cc5781?sid=416f5ae5-3491-459e-aa77-544356d6fbac CodePen Link: https://codepen.io/kamranimtiaaz/pen/KKjOzeg Thanks, Kamran
-
Hi ! I'm trying to work around the "Layered pinning" demos, to make it work with sections of 50 viewport width. I made 4 sections. Each is divided in two blocks of 50 viewport. Left and right blocks from the first section have a background color and a text. The next 3 sections only have a background color and a text for the right block, leaving the left block empty and transparent. What I'm expecting is that the left block of the first section doesn't move up and is always visible, as the right blocks overlap. I'm struggling to understand how to make it work. Kind regards.
-
When I scroll the page on Safari iOS I can see a jitter on the page. Not in the animation but the overall page -- the text, etc. I understand that Safari handles scroll differently, but I'm not sure if there's something else I can do to stop it. When I comment out the JavaScript and scroll the page the jitter goes away.
-
It is not possible to disable the pin with scrollTrigger's onEnterBack to prevent the display from shifting.
gsap-novice posted a topic in GSAP
I don't want it to execute just once, I want the pin to respond every time onEnter. The display shakes when onEnterBack is used. I want to fix this so that the screen doesn't shake when onEnter. -
Hello Guys, iam trying to recreate this scroll animation https://lulufinserv.com/products/gold-loan/ on this section "10 Reasons that prove LuLu Gold Loans", i tried creating it https://codepen.io/Rare4pple/pen/BagJrNv . but im stuck
-
Hello, everyone. I'm new to GSAP, so I'm sorry if I'm asking a dumb question. I've been trying to solve it for 3 days now. I couldn't find the answer in the documentation, I looked through a bunch of examples, read a lot of answers on the forum. As you can see from the pen, I have 3 sections. In the first one, I have implemented the animation of the div.box from the bottom center to the center right while the user scrolls. The section is pinned until the animation ends with a small gap. After that, the page continues to scroll to the second section, which is also become pinned, until all the slides are shown. And as you can see, the div.box will scroll with the page after the animation is over (which it should do after the section is unpinned by default). But I would like the div.box from the first section to not move with the page when the user continues to scroll after the animation is over, but to stay in the same position until the second section covers it and becomes pinned. I tried creating separate scroll trigger and pin only the div.box (something like this): ScrollTrigger.create({ trigger: ".box", start: "center bottom", end: `+=${window.innerHeight * 2}`, pin: true, scrub: true, }); But the problem is that then the div.box becomes position: fixed and starts to overlap with the second section on scroll. I also tried setting pinType: "transform" instead of "fixed", but with this setting, the animation has some glitches related to the scrolling speed, I think. I will be very grateful for your help, if it is possible to implement it at all
-
ScrollTrigger pin is pinning higher then its suppose to causing the pin to block the content before it
PakoVince posted a topic in GSAP
Hello Everyone. I am new to GSAP and have been trying to work with scrollTrigger for a bit now and I am completely lost on this issue. I am using HTML, SCSS, and JS (As you can see from my codepen). What I am trying to do is fairly simple and I am surprised it is causing me this much pain but I simply want to pin the rebuilding_country once the top of the viewheight of the window hits the top of the .rebuilding_country div. I feel like my gsap scrollTrigger is correct and this may be purely a SCSS issue I am encountering as I am also new to that. However, when I comment out all of my scss it still has this same issue. It is especially bad on mobile. On desktop 1920 1080 it works pretty much as expected. So now that I have stated what I am trying to accomplish lets look at what's going wrong. For some reason as the screens get smaller the start of the pin trigger moves higher and higher even though when hovering over the divs with devtools the rebuilding_country div is still below all of the content that comes before it in the HTML structure. So why is the start marker near the top of the entire rebuilding section while my screen gets smaller is my issue and where I am lost. I hope this was clear and I want to reiterate I am using SCSS. Thanks in advance. -
Hi, I have a problem with pinning mainly on mobile. It's similar on desktop, but I somehow managed it, but on mobile, by scrolling on the phone, my "end" moves even though the element is already on the "pin". The faster I scroll with my finger, the more my "end" goes up, as if it doesn't hold its position. This will be perfectly illustrated in the video below https://streamable.com/5tzbzq my simple piece of code, although I have already tried many solutions. With lenis, without lenis, etc.... scrollTrigger: { trigger: ".p-single-gallery", start: "top top", end: "bottom 50%", pin: true, scrub: false, markers: true, }
-
Hi everyone, I'm working on a Next.js project using GSAP and ScrollTrigger for horizontal scrolling. At the end of the horizontal scroll, I want the last panel to split into left and right sections. The left section should pin while the right section scrolls vertically. CodePen Example : Horizontal Scroll Example StackBlitz Project : Pin Left Section and Scroll Right
-
Help Needed: Combining Scroll-Based Div Resizing with Text and Image Animations Using GSAP
availablecode posted a topic in GSAP
My Problem: I can't make the transition between the two animations in my CodePen so that they are combined into a single smooth animation. What I'm Looking for in the Animation: Global Animation: The two animations below should be combined into a single smooth animation. Resize on Scroll: During scrolling, a div should resize until it reaches a certain size on the left side. Text Appearance: Once the size is reached, text should appear on the right side. Image Change: For each section of text, a new image should appear. Technical Details: Div Resizing: The div should gradually change size based on scrolling until it reaches a predefined width on the left side of the screen. Text Appearance: The text should appear smoothly after the div has reached its final size. Each section of text corresponds to a different scroll step. Image Change: Each new section of text should trigger the appearance of a new image. What I've Tried So Far: GSAP ScrollTrigger: I've used GSAP ScrollTrigger to try and trigger the animations on scroll. I managed to resize the div, but then I can't get the text to scroll alongside it. GSAP Timeline: I tried creating a timeline with GSAP to sequence the animations, but I'm having trouble synchronizing the text appearance and image change with the div resizing. CSS Transitions: I also tried using CSS transitions for resizing, with a fixed position. Additional Information: Sketch: I have attached a sketch to help illustrate what I'm aiming for. YouTube Link: Here is a YouTube link showing the expected result in two parts after resizing: Youtube Link :
-
Hello everyone! We're building a website using GSAP with ScrollTrigger, ScrollTo and ScrollSmoother. We noticed that if you refresh the webpage after scrolling (so not when its on top) the pinned sections completely broke. Here's the website we're building: https://terramata.croma.site/it/ Looks like the page height is not calculated propely after a refresh. Do you have any idea how to fix this? (Tested on CHROME) Thanks!
-
ScrollTrigger - Pin sections and reveal the second layer over the first
shubhra posted a topic in GSAP
Hi, hope everyone is doing great. I would like to be able to achieve an effect that is done with scrollmagic but with scrolltrigger. It layers 2 images on top of each other and the second image is hidden. But when you scroll the second image and section is revealed on top of the first section. You can understand the effect more from this gif - I hope its not too much of a trouble and I can get a starting point here as I am not very good with code. Thank you so much. Have a great day! -
fade-in Achieve Fade In Feature on Children Div inside Stacks Container
jeycraz posted a topic in GSAP
Hello to all the professionals out there, I'm working to implement the feature reveal bottom when scrolling as shown in the GSAP reveal btm demo gsap. But I want to add a feature where it implements a fade-in feature as I slowly scroll through section .panel. For example, when I'm about to scroll until the end of image 1. It will slowly reveal,(opacity:1) image 2 along with the words. I also have an additional problem in my codepen, somehow when I put them inside the parent container of display:flex,flex-direction:column,i am expecting my header(h1) will be shown as a display: block. I am not sure why it floats on top of the pin-container#container. The methods, i have used its actually looping through the toarray.panel(:not:first) but somehow, because my .panel is stacked together because of position absolute, the scrollTrigger of opacity:0-1 somehow triggers when its in contact of the #Container. If anyone reads this, please help me. THANKIUUU!!! Really thank you for your precious times!!
.png.d96190ab7c0fe32b5a03acc0b8fe301a.png)
.thumb.jpg.508ba629559fba639e5f03a505c5b072.jpg)
(1).thumb.jpg.5592ce2e25baee2a91d5a404ae25ca7b.jpg)
