Search the Community

Hi, Can you help me to do this nicely? My requirement is First, when this section enters the viewport, it should become sticky. While sticky, the image should zoom slightly based on the user's scroll direction—zooming in when scrolling down and zooming out when scrolling up. Next, as the user continues to scroll, the product backside and price should animate into view from left to right. Following this, a cross mark should appear in the middle, cutting through the image. The entire section, including the product image, price, and cross mark, should then fade out smoothly, and image 2 should transition from bottom to top with a slight zoom effect. This sequence should repeat for image 2, where the price animates from left to right, the cross mark cuts the image, the section fades out, and image 3 appears with a slight zoom. Finally, after completing this sequence, the section should unpin and transition to the next section. Sticky Section: The section becomes sticky when it enters the viewport. The image slightly zooms based on the scroll direction: Scrolling down: Zoom in. Scrolling up: Zoom out. Product Backside and Price Animation: Reveal the product backside as the user scrolls. Animate product price from left to right. Cross Mark and Image Transition: A cross mark appears in the middle and cuts the image. The entire section (product image, price, and cross mark) fades out. Image 2 transitions smoothly from bottom to top with a slight zoom effect on the scroll. Repeated Animation for Image 2: Price animates from left to right. Cross-mark cuts the image. The section fades out. Image 3 transitions into view. Final Sequence for Image 3: Price is displayed. Image 3 slightly zooms on the scroll. Section unpins, transitioning to the next section.

Hello Guys, i found a Site with a really nice effect on it. https://www.mech-human.com/ Someone of you know how to get it to work ? I have abosluty no Idea .. I want to do a scroll into Text and reveal the Section behind. Thank you 😃

Hello community. I'm trying to implement an animation that has been talked about here more than once from the site https://lenis.darkroom.engineering where Enter Lenis is approaching us in the screen. I implemented the same "backing" and it worked fine until I started testing it in Safari browser and on mobile devices The issue is that as I get closer, the edges of my shape (SVG) start to blur and I can see the outlines are not clear. I tried to implement my shape as a normal text, but I faced the same problem, my outlines during the animation process become not clearly visible. I also tried to add will-change property, but with this property my edges become blurred even in Google Chrome browser where everything was fine before. What could be the problem? Thanks! Demo: https://codesandbox.io/p/sandbox/scale-problem-tx8s3m?file=%2Fsrc%2FApp.tsx%3A32,11 Lenis Website: https://lenis.darkroom.engineering

Certainly! It seems like you're looking to implement a text animation similar to the one on the Courage Inc website using GSAP and ScrollTrigger in a React application. Here's a revised and refined version of your request: "I'm new to GSAP and facing challenges with implementing a ScrollTrigger text animation in a React project. I would like to achieve a text animation similar to the one on the Courage Inc website (https://www.courageinc.com/). Can someone guide me on how to accomplish this effectively in a React environment?"

Hi, for a school project I would like to recreate the effect as seen on this website : https://2018.craftedbygc.com/#enter The most important part is the fact to zoom in divs and go from one div to another in a smooth way, scrolling endlessly until the end, and have the animation evolve with scrolling, not just fire at a certain position. How can I achieve that ? I'm very new to gsap so I lack experience to determine the best approach.

I'm trying to zoom in into the video playing in laptop but the problem is the image that scale it appeared in the bottom of page , how can I hide it

Hello, I am working with SVG object (Map), I have divided it by regions and now trying to append on-click zoom-in and zoom-out function. I have decided to make zooming function via changing Transform's "scale" and "translate" properties. Example is here: https://codepen.io/Creedplay/pen/oLRPjY Just check JS lines, and for test click on red object. I have used TweenMax library for transition change of up mentioned properties. My problem is a visual of transition, the "zoom effect" does not go straight to object, it starts from left and then goes to object. I think reason for it is asynchronous change of "scale" and "translate" properties. but I am not sure how to fix it. Can anyone explain why it does this? and help me to fix? I would like to make "zoom effect" to look like this: https://bl.ocks.org/mbostock/9656675 Thanks in advance.