Policsek

So, what I am trying to achieve is that when I scroll, the .images-container should be "behind" the hero and it's " blocked/pinned/it doesn't move down ". When the hero is completely out of the viewport, only then the .images-container should "unblock" and you can actually start scorlling to see the next gray rectangles. Right now, the .images-container comes from bottom of the viewport. It should be already there. To be more clear, imagine that I don't have the .hero element. Just comment it out in html and js. As you can see, .images-container is already in viewport and you can scroll down ( nothing crazy ). Now, what I want to achieve is that if I add the .hero element, as I scroll down the .hero element leaves the viewport and .images-container is revealed ( like a mask or like a curtain ). When the .hero element is out of viewport, only then you can start " scrolling " as you would normal do if there was no .hero element. I know I didn't make myself clear, but I tried as much as I could.

Hello, I'm trying to achieve sections pinning animation, exactly like here https://futuregreensteps.com/?ref=lapaninja Please notive that every section will have a different height, I don't know if that matters. Thank you!

Thank you! I guess I will do this trick for h1,h2..h6,p,span,a,strong. Maybe I can create a function that "adds/removes" will-change property only when the page is scrolling. So you scroll - some elements get this property ( maybe only elements that are in viewporr ) - you stopped scrolling -these elements get will-change: unset - and so on. I'm not sure of this helps or not the overall performance.

( the problem described below is not applied only to scroll smoother from gsap, I have the same problem with locomotive scroll and others smooth scroll plugins ) Hi. I'm using scroll smoother to create a smooth scroll experience. The only problem is that when the animation is about to end ( after you trigger the mouse wheel ), some elements are " shaking " until the animation is completed, especially text elements, seems glitchy. Maybe if you are using a MAC, you won't notice this glitchy-shaking-effect when the animation is about to end, but on Windows ( with some good hardwares ), it does shake. Since scroll smoother ( and other plugins ) are transforming some "<div class="content"> ... everything ... </div> " on Y axis , a solution is to set " will-change: transform " on that ".content" div. This solution seems to work for me. Adding this property, everything work just fine, no shake at all. But acording to mdn, adding " will-change: transform " on too many elements, can cause other perfomance problems. Have you noticed this glitchy-shaking when using scrollSmoother plugin? ( or others ) How would you fix it?

Thank you for your time! Yes, I thought about scaling the actual image. My somewhat-solution was to give it a scale ( not just on Y, so I do not strech the image, but both x and y ), but due the overflow:hidden of the "image-container " I would lose some details of the right-left part of the actual image. I feel I'm really close to solve this problem, but I'm missing something.

!!! Open the codepen in a new tab, I used foundation for mark-up, so first image should be very-very small ( large-2 ), otherwise maybe you won't see any problem. Hey. I'm trying to achieve is the following image scroll effect: https://dennissnellenberg.com/about ( first image ). Let me give you some context: "image-container" in CSS file is used to give the actual image a "height", based on the aspect ratio of the image, so I am giving each "image-container" a specific padding-bottom, in order to fit the image's aspect ratio ( in real world, if the user changes an image with another, I want to keep the aspect ratio, so the website doesn't "brake" ) I used "image-container" with overflow:hidden, so the actual image can "hide" somewhere, on scroll also, I have a background-color: red on "image-container" so you can see the entire "image-container" height; this is only for dev mode; for production, I would set the background-color to nothing/white Nothing fancy for now. If you don't run the JS file, everything works just fine. You won't see any background-image: red. In order to achieve the desired animation, I am using scroll trigger. So, when "image-container" gets into view-port, I am giving the actual image a "yPercent: someValue", therefore, at first look, everything works ok. But the problem is that I don't want to see any "red color" on scroll. At the end, the background-color will be set to nothing, so imagine if you had some text above the images ( above "image-container" ), if the "image-container" is not exactly in the center of the view-port, that text would "behave" like if you have set a margin-bottom ( or margin-top on "image-container" ). Guys, I may not be very clear, but I hope you get something of what I am trying to achieve. Maybe is not a GSAP problem, but here are many creative devs that might help me. Thanks!

Hi, I'm working on a page transition animation. When leaving the page, I want to animate an element ( from height 0 to 100vh ) which will cover the whole page. This is easy, but what if I want to animate the element from a curved shape to a full rectangle ( like here, https://adrienlaurent.fr/ , use the nav bar to see the effect). My poor effect is simple and works just fine, but I'm not sure where should I start to animate it from that shape. I know I might need to use a SVG, but still confused. Maybe "border-top-left-radius & border-top-right-radius" could also help? Thank you!

Hi. I'm trying to animate the borders for each section but only when the section enters the viewport. For section 1, animate borders when section 1 is in the viewport, for section 2, animate borders when section 2 is in the viewport. And so on

This helps a lot, thank you for your time! I will have a deepr look on your approach too!

Sorry, I added the demo with the latest updates

Hi. I have a container with it's width seted to 130vw and height to 150vh. All I want is to scroll inside the container using mousemove event. So, if I move the mouse on the top right corner of the visible window, I should reach the top right corner of the container. I guess I need the following values, but I'm not sure how to do the calcs. The best example is https://www.davidwilliambaum.com/ Thank you so much! .container { width: 130vw; height: 150vh; } class El { constructor(element) { this.element = document.querySelector(element) } scrollElement() { let self = this window.addEventListener('mousemove', (e) => { let eX = self.element.offsetWidth let eY = self.element.offsetHeight let pX = e.pageX let pY = e.pageY gsap.to(self.element, .5 { x: someCalc... y: someCalc... }) }) } } const el = new El('.container') el.scrollElement()

Hi guys! What I'm trying to achieve is to reveal an image from an ellipse shape. My code seems " to work somehow " but I'm pretty sure I did something wrong. First, I tried to change it's clip-path with gsap, to make it from the ellipse, in CSS, to polygon ( 0 0, 100% 0, 100% 100%, 0 100% ), in GSAP. But it didn't work ( probably you can't transfrom from a shape to another, from ellipse to polygon ). So I simply changed the ellipse's width and height ( you can see that in my code). Tho' I did something wrong because the animation duration is 2.5s, and if you watch my example, the animation surely take less time ( like 1s or even less ), at least visually. So, I guess the code works "just fine", but because I'm setting the ellipse to expand to (100% 100%), I can't see the entire animation ( like the animation really takes 2.5s, but I can't see the whole process ). Any better ways to do this? Thanks a lot!

Thanks, I guess I'm gonna to something similar. Thanks for sharing!!

Oh, I guess it's not possible with a random order because each letter has its own different width on X and. For example, if you replace "i" with "m" then the text, until the animation is complet, would look bad. I guess it only works if you start from left to right..

Hi, Sorry for this long ( and maybe not clear ) description, but it's hard to explain in words what I'd like to do. So let's say that I have 3 words ( 'portrait' , 'wedding' , 'concert' ) and, at first, only one is visible. What I'm trying to accomplish is to change the 1st word with the 2nd word, then the 2nd word with the 3rd word, then 3rd word with the first one and so on ( with a small delay between each one ) but I want to change them by random letters positions replacing with a small delay between each letter, without waiting for the entire word to disappear to make the 2nd to appear, but by each letter. For example: from "portrait" to "wedding" ; "p[o]rtrait" -> p[e]rtrait ", p[e]rtrait -> p[e]rt[i]ait, p[e]rt[i]ait -> p[e]rt[i]a[g], p[e]rt[i]a[g] -> [w][e]rt[i]a[g], [w][e]rt[i]a[g] -> [w][e][d]t[i]a[g], [w][e][d]t[i]a[g] -> [w][e][d]t[i][n][g], [w][e][d]t[i][n][g] -> [w][e][d][d][i][n][g]. Each letter should animate at leaving by going up from default Y position ( 0 - > transformY100% ) and the new replacing letter should animate from bottom to default ( 100% -> 0 ). Back to example, "p[o]rtrait" -> p[e]rtrait ", "o" is translated to Y100% and then, after the animation is finished, "e" is translated from Y -100% to initial position and so on with each letter in a random order. Somehow, an example it might be https://dribbble.com/shots/6338076-CTMK ( but the animation here is on X position, it's not random and it's not changing the entire word, just a few letters, but I hope you'll understand ) Guys, I know I might not be clear so I'll get it if no one can help me with this one, but I just can't figure it out how to do this.