Search the Community
Showing results for tags 'pinned'.
Found 24 results
-
Hello ! I'm new with scrollTrigger and I don't understand how I can pin elements inside my horizontal scroll section. For example, in this codepen : https://codepen.io/PaulettePaillette/pen/MWjeqdb I would like the scroll to stop when the number 3 (grey div) "touch" the left side of the screen. And then the number 4 scroll above the number 3 section and the classic horizontal scroll continue. I think it's possible, I hope, but I don't understand how to make it. I hope my issue is clear, and someone could help me on it. Thanks
-
Hello everyone, I hope you're doing well. I'm seeking immediate assistance with a topic concerning horizontal scrolling. Initially, I have an image that needs to be zoomed (scaled) from the center to the top, and then further zoomed into the center (the zooming functionality is currently working fine). Following that, I need to implement a horizontal scroll to the right. When the left edge of the text card reaches the center of the viewport, it should reveal a line (desktop-line-animation) towards the image, which is positioned halfway on the left side. The scrolling should be pinned while extending and reducing the line. Once the line is completely revealed, scrolling should continue, and the text needs to change to new content until the video comes fully into view, at which point the scrolling ends. I've been using stops, but currently, everything occurs after the image has finished zooming and before scrolling starts, resulting in a significant delay. Any suggestions or improvements to optimize this process would be greatly appreciated. I'll attach a desing and to show you how it should look like:
-
Hi! We're building a site where different sections gets pinned as you scroll down. ScrollTrigger is really great for this and has saved us a lot of dev time so far. We've run in to an issue where the bottom part of a section flickers when it gets pinned. I've modified an example codepen to recreate the issue, you might need to try a few times to recreate it as it's not happing every time. We get it consequently on our site with latest chrome and on iOS. Here's a video of the flicker, check the bottom part at 2 secs when the red section is pinned: https://www.youtube.com/watch?v=iOQWNadW8BI Anyone who's run in to this? Thanks
- 7 replies
-
- 1
-
-
- scrolltrigger
- pinned
- (and 1 more)
-
Hi. Please note: this is a general question asking if the plugins will work well in a positive way when using pinned scrollTrigger timelines. I have a large scrollTrigger timeline which is pinned and I want to do everything I can do to make it feel as smooth as possible. Can you use scrollSmoother on/for scrollTrigger timeline's which are pinned? timeline code is here if it helps: let tl = gsap.timeline({ onUpdate: render, defaults: { ease: 'none', }, scrollTrigger: { trigger: section, pin: true, // pin the trigger element while active start: 'top top', // when the top of the trigger hits the top of the viewport end: '+=1000%', // end after scrolling 500px beyond the start scrub: 0, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar: was 1 anticipatePin: 1, invalidateOnRefresh: true, }, })
-
I'm building an app that has some slides scrolling along with page, however, to make the transition to pinned elements smoother I need pre and post pinning animations. I've built a quick example of my solution, and would like to know if there's more elegant/optimal way to do this? Any input appreciated.
-
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!
-
Hi Guys. I have replicated my issue in CodePen but you can not see the issue unless you view it in a mobile browser without CodePen wrapping it. So to show you, I have placed the same code that is in the CodePen in a html version as a visitable link. https://kubikdesign.com.au/posts/20230610-gsap-jump-issue.html The issue is: after scrolling past the scrollTrigger area the page jumps up. I have also created a screen recording on/of my mobile showing and explaining the issue (ensure sound is on). https://kubikdesign.com.au/posts/20230610-gsap-jump-issue.mp4 Thanks guys. ? -
Every time Pinned section appear gsap add extra css code shift that section to right -
Hi, i try to make a pinned element on my page. If you go to the section "Découvrez mon histoire" all down (or discover link in the menu) the section on the right should be pinned. but i don't understand why, the fixed position is relative to the page instead of the screen. I tried to do the same on codepen, and everything works well. Do you have any idea ? https://justhugo.fr/
-
It is kind of what I want but due to position absolute I cannot find a way to add multiple scroll trigger and get an animation which is kind of Scroll Animation demo 's story section which reveal stories from underneath. -
Hola comunidad, hice un ejemplo de un elemento pin con gsap y reaccion, creo que lo hice bien, me gustaria saber si hay alguna forma de optimizar el codigo o si esta bien planeado, intente hacer un arreglo con utils para lograr el efecto del texto pero no lo conseguí, solo pude hacerlo usando cada componente individualmente, ¿es posible lograr ese efecto con "gsap.utils.toArray"? Caja de arena: https://codesandbox.io/s/gsap-react-pin-scroll-24c7fc?file=/src/App.js
-
Hello! I'm working on a scrolling section with pinned content that changes per section from this demo: https://codepen.io/GreenSock/pen/YzyqVNe I have the base functionality working as intended, but I wanted to adjust the point in which the images change. Currently the image changes when the text on the left is vertically centered. This makes the image fade in later than it should for it's corresponding text. I believe the issue is with.enter and .leave, but I'm still a bit too new to be able to debug this on my own. Ideally the fade in/out of the images should sync up more appropriately with the content as you scroll. Thank you in advance!
-
Hello, I have an issue with ScrollTrigger, can anyone help me to fix it ? I have a full-screen pinned div and I want to see an animation while it is pinned. At the end of the animation, it is displaying a text. I want that once the animation finishes I can only see the last picture, with the text, and never again the animation (until the next page reload of course). When I try to kill the animation "onLeave", it makes a "scroll jump" When I try to kill the animation with "once:true", the pin-spacer remains, and I have a big white space above my text Here are 2 pens to show the issue. In this example, a div becomes yellow when you scroll down, and it must remains yellow at the end of the animation, even if you scroll up again. 1) using once (big white space above the div) : https://codepen.io/Guelid/pen/OJEGzGp 2) using kill ( scroll jump) : https://codepen.io/Guelid/pen/JjBjbYM The text just after the scrolltriggered div is in red to highlight the scroll-jump issue Thanks !
-
Hi, I'm really stressed, I don't know if you can help me. I tried everything but for some reason the menu keeps moving with respect to the size of the window, what can I do? if I disable the trigger the menu does not move, and also the rest of the panels do not move, the only one that changes is the pined one. can you help me
-
Hello fellow "gsapers", I'm looking for some guidance on how to achieve the effect i want. The main effect i want its like this codepen i linked. I have an dinamic array of section that will be pinned just like that codepen, but then each one of those sections will have an image sequence. When the image sequence of one section ends then it should transition to the next section, and then start the corresponding image sequence (all this controlled by user scrolling). I got the sections transition working just like the codepen, but i dont know how to approuch to make the transition wait until the section image sequence end and then do the section change. I would be very thankfull if someone could point me in the right direction. I'm a bit lost, and still new to gsap.
-
I hava two scroll animations after each other. The a tag of the first animation is unclickable because it is overlayed by the pin-spacer of the second animation. Is there any way I can make the a tag clickable?. (if I enable pin Spacing the a tag gets clickable but then there's a huge white space between the two animations. Any help or comment highly appreciated!
-
Hi all, I was trying to replicate a website here is the link of the site https://space.ge/ . i did all the parts of website except the card one that moves from top till end of the page . i tries doing few stuff like pinning and animating based on position but none of them were successful also those aproches are not dynamic enough . so any body have any idea how to achieve that.
-
Hello. Hope you're all good. I have a problem where I can't find a solution and I was wondering if I can get an idea. In the previous pen I have an horizontal scroller ( not the same in my current project but something really close to the pen ) followed by a carousel that scrolls one by one on each scroll. This was inspired by this pen: https://codepen.io/GreenSock/pen/rNOebyo. Now the problem: in my pen and the one from the demos the start and end of each box is based on the window innerHeight and I can't figure it out on how I can start it once the user hits the carousel. The main idea -> goes through the horizontal scroller, the centered carousel is pinned, scrolls for like 300vh ( 100 vh = 1 scroll ) and then goes to next section. This isn't the only idea I tried various way of getting the offset().top of the centered carousel to start from there but without any success. Isolated carousel just in case: https://codepen.io/visualbadger/pen/yLbNxYW Thanks in advance and wish you a splendid day. The pen with the carousel and the horizontal scroller: -
Hello All, I created a Vertically Pinned section with GSAP and scrollTrigger the section link is attached. Basically this is working fine for me but there is a problem. I wants that when I click on a specific anchor then it will scrolled to the specific section I tried different methods but it is not working fine. It will be great if you help me in this case. I'll be thankful.
-
Hello everyone, first of all I would like to thank you. Your tools are by far the best I could ever use. The investment in the membership has already paid off 10x. I have a conceptual question and I have tried many ways to get it to work correctly but I realize I am barking up the wrong tree. I have a section that has 100vh height and is pinned. It starts "top top" and ends "+=400%". Inside this section I have 4 text layers. These are also 100vh height and 100vw width and absolutely top/left set to 0. All text layers have an opacity of 0. Everything starts with a blank red section and some firework animation. When reaching 50% (out of 400%) I want to have text layer 1 from opacity 0 reaching opacity 1. Starting from 50% to 100%, I want to begin hiding layer 1 and fade in layer 2. When 100% is reached, I want text layer 1 to be opacity 0 and text layer 2 to be opacity 1. I want the same to continue in increments of 50. So when 150% (out of 400%) is reached, text layer 2 should change from opacity 1 to 0 and likewise at the same time text layer 3 should change from opacity 0 to 1. Somehow I didn't quite understand how to do this with the timelines. The basic animation works, but unfortunately I can't manage to hide the back layer. The whole thing has to work in two directions, of course. The elements should fade at the same time (with scrub: true). In my current attempts, I get the layers to fade in one after the other using a timeline, but I don't get the back layer to fade out. What is the correct way to do this? Maybe there is an example around I've missed. Thanks! Regards Hirbod
-
Hi, I am trying to pin ".sun" element on bottom right of the page as fixed from start of the page till it reach the ".landscape" element, when ".sun" enter the ".landscape" element then it should scroll as normal with page. I am trying to achieve it by gsap 3 with scroll trigger plugin easiest and efficient way. on my codepen it doing totally opposite what i am trying to achieve. can anybody help please. -
Hi , I am trying to achieve similar effect as the below post in Gatsby, I am new to Gsap much appreciate any support. https://codesandbox.io/s/gatsby-tests-xyij4?fontsize=14&hidenavigation=1&theme=dark
-
Hi Guys, Im a Developer from Germany so please excuse my English.. I need to create an Image Sequence and it should behave like this: You would scroll down until you have the Sequence in the Center of the Viewport, then the Viewport would be pinned (for example) and the Sequence starts. As soon as the Sequence is complete you could scroll further on the page. Is that possible with GSAP? I tried Scroll Magic and failed but i don´t have any experience with Green Sock.. I attached a Picture of the concept.. the Picture you see in there is actually a GIF implemented as an image Sequence. So as soon as the whole brown Module is in view, Scrolling of the ViewPort would be disabled until the Image Sequence is finished. The Live URL (not finished) is here. Maybe you guys have an Idea.. I would be really thankful! Greetings from Germany, Finn
-
Hi everyone, Thanks in advance for your help. I've gotten pretty familiar with GSAP/Scroll Magic over the past year or so and have used it on many projects. This is the first time I've been unable to get things working via troubleshooting/docs... so hopefully it's even possible. I'm trying to create an interactive timeline that will trigger new slides whenever you reach the next "period/year". However, the timeline has to remain pinned as you scroll. The functionality isn't quite there yet, but I've added indicators to show the issue I am having. Whenever you scroll it pushes the individual scenes down. Is there anyway around this? What I've tried so far: • Adding two controllers, one for the pinned scene, and another for the individual period scenes. No luck. • Using the "pushFollowers: true" setting on the pinned scene. No luck. • Using start and progress callbacks combined with bloated math programming - but it felt hacky and ultimately will be too hacky for a live production site. Thanks again!
