Search the Community
Showing results for tags 'zoom in'.
Found 5 results
-
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.
