Search the Community
Showing results for tags 'scale'.
-
Hi, I'm working on a website where a large image scales as you scroll. At page load, I want the image to start at 20% scale and be positioned higher on the y-axis so that it's visible in the viewport. While the setup mostly works, I've encountered an issue: when I apply a negative y-position, the scaling no longer happens from the center. https://codepen.io/remcovb/pen/eYwvGqb However, when I remove the negative y-position, the scaling works correctly from the center, but then the image isn't in the viewport anymore. https://codepen.io/remcovb/pen/bGPqoyo Any advice on how to maintain centered scaling while keeping the image in the viewport? Thanks in advance!
-
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
- 5 replies
-
- scroll
- scrolltriger
- (and 6 more)
-
Hi, I am just starting on gsap from last few weeks. I have a simple animation, I am trying to figure out from last few days. I have a circle and dots on the circle radius. Requirement is to scale the dots when the screen enters the section and when the user scrolls each dot should get a border indicating different content (which means a text change and image change). The issue I am facing is the borders around circle are able to appear correctly when scrolling down. But when scrolling up, the borders around the dots are not disappearing correctly. Only 3 dots out of 5 disappear when it reaches the first content, where 4 should disappear. I am not sure if I am having the right approach. Any help in the right directly is greatly appreciated. thanks in advance! Codepen attached.
- 2 replies
-
- scrolltrigger
- pin
- (and 4 more)
-
Is it possible to update values of html on resize? Like this? onResizeStart:function() { xSize.innerHTML = this.target._gsTransform.scaleX; ySize.innerHTML = this.target._gsTransform.scaleY; } In the codepen i can't get values of _gsTransform.scaleX for some reason.
- 3 replies
-
- _gstransform
- scale
-
(and 1 more)
Tagged with:
-
I need a way to stop the scrolltrigger after the scale img container, currently www.laounika.com keeps scrolling after the video section. The last element that should apear should be the video then the footer. gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ toggleActions:"play none none reverse" }) gsap.to('.img-container',{ scale:50, ease:"ease", scrollTrigger:{ trigger:'.video-section', scrub:2, start:"top top", end:"bottom", pin:true } }) gsap.to('.right' ,{ autoAlpha:0, x:500, duration:1.5, scrollTrigger:{ start:1 } }) gsap.to('.left' ,{ autoAlpha:0, x:-500, duration:1.5, scrollTrigger:{ start:1 } }) gsap.to('.txt-bottom',{ autoAlpha:0, letterSpacing:-10, duration:2, scrollTrigger:{ start:2, } }) const tl = gsap.timeline(); tl.from('.left-side div',{ y:150, opacity:0, stagger:{ amount:.4 }, delay:.5 }) .from('.right-side',{opacity:0,duration:2},.5) .to('.wrapper' ,{x:-window.innerWidth}) ScrollTrigger.create({ animation:tl, trigger:'.wrapper', start:"top top", end:"+=600", scrub:1, pin:true, ease:"ease" }) const timeline = gsap.timeline(); timeline.from('.title span' ,{ y:150, skewY:7, duration:3 }).from('.txt-bottom',{ letterSpacing:-10, opacity:0, duration:3 }) <div class="wrapper"> <section class="video-section"> <div class="video-container"> <video width="320" height="240" autoplay loop muted playsinline> <source src="./media/laounika_videoclip.mp4" type="video/mp4"> </video> </div> <div class="img-container"> <img src="./media/Oblack.png" alt="" class="img"> </div> <div class="text-content"> <div class="img_txt"> <div class="title bgz left"> <span>La</span> </div> <div class="title bgz right n"> <span></span> </div> <div class="title bgz right"> <span>unika</span> </div> </div> <p class="txt-bottom"> </p> </div> <div class="v_container"> <div class="left-side"> <div class="tv"> <div class="bg">Lou</div> <div class="sm">Gaupp</div> <div class="bga bgi">Andrea</div> </div> <div class="text-container"> <p> Also known as Laounika (the one and only) is a unique painter, muralist, performance artist as well as a musician and recording artist. </p> <p> She has been exhibiting her work and performing in Canada, the U.S., Europe and Mexico for over 20 years now and continues to devote herself body and soul to both painting and music, alternately at times and often simultaneously. </p> </div> </div> </div> <footer> <div class="logo"><a href="#">eraf</a></div> <div class="btn">instegram</div> </footer>
-
Sorry for my bad english. i make an animation with ScrollTrigger, when the images become more and more bigger, the images will flash. full screen to see this example, you will find this problem. https://codesandbox.io/p/sandbox/blissful-bhabha-rz7wlb?file=%2Fpages%2Findex.tsx&selection=[{"endColumn"%3A40%2C"endLineNumber"%3A80%2C"startColumn"%3A40%2C"startLineNumber"%3A80}]
- 2 replies
-
- scolltrigger
- scale
-
(and 2 more)
Tagged with:
-
Hello, If I use force3D: false to fix safari bug, it solves the issue and the SVG looks sharp. But If I use autoAlpha: 0 with force3D: false, the SVG looks blurry. I did not find any solutions on this forum regarding this issue. Could you tell me how I can fix the issue? Best Regards, Anis
-
Hi everyone, Could someone help me, I want to make a button effect like in this example. Please see the top-left circle menu: http://www.superbeparis.com/#!/ On mouse enter button follow the mouse and scale and on mouse leave animate to the initial position. Thank you guys
-
hi, i got a few animations linked to a scrolltrigger, which work absolutely fine with every browser. but in safari if the screen is over a certain width the animations sometimes start to flick or just lag. i already tried to just animate them automatically (without scrolltrigger), but it seems like not the scrolltrigger is the problem. i think that svg's require more performance in safari or something like that? so the question is how can i fix my animations, for safari? it also seems like the animation works fine unless u got a 4k or higher screen. thanks in advance!
- 11 replies
-
- 1
-
- scrolltrigger
- performance
-
(and 2 more)
Tagged with:
-
Hello, I have a series of image that get pinned on after another. I would like to make the images pinned and scale while scrolling It seems that the image is pinned during the whole duration of the timeline, but scaling for each image is not working as expected For eg: i need all images to scale down from 2 to 1, So please help me to transform each images individually after it's get pinned. Please have a look at this demo https://codepen.io/shahas-nizar/pen/KKvOReo !Sorry my bad english Big thanks for this awesome plugin
-
Hello, sorry if this is a dumb question, I think is more easier that what I'm make it out to be. I have a rada graphic and I need to show multiple colored areas but I need to create a "scale in & scale out" (sorry for the phrase, I don't know exactly how to call this type of animation) animation for every single area, so when I show one I have to scale out before the next one.
-
Hi! I'm looking for suggestions. I want to create a presentation with different images that should be animated on scroll, like going thru a tunnel. I want 4-6 images to be visible at a given time and images scaling up from top center(like we go towards them). You can see my try in codepen. For now I don't know how to stagger the images so they will come multiple at once(maybe timeline with '-=0.5' as 3th param), how to make them go past by screen nicely. Any ideas will be welcomed.
- 1 reply
-
- scrolltrigger
- scale
-
(and 1 more)
Tagged with:
-
Thank you for creating such an amazing tool for animation and supporting community. I have a question about way how Gsap is creating an order of properties for transform while tween/set. As i understand based on documentation, skew properties come after scale properties (this is exactly what i need), but when im trying on a practice i see the opposite result where skew is coming before scale properties. Can you please help me to understand why this happen and how can i change this? I have attached codepen comparing two results: first one i've set up using css and pick the order by myself, second order was created using gsap set. Im working on complex animation, part of this animation using scale and skew properties, but im getting wrong result when skew coming before scale. Thank you so much.
-
Hi there Been using GSAP for years, love the library and use it almost daily! It's awesomecakes. This is my very first forum post I believe For a project I'm working on I'm using my own quite simple Ken Burns implementation, which works without using timeline. There's probably a much better and more efficient way to code this effect so I'm open to suggestions. I've successfully used this approach in the past (at least in a very similar fashion) and didn't experience the issues I'm having now (see here: https://mikebravo.ch/). The reason it was working then eludes me. Could be because I was doing something different (CSS maybe? unsure) or it could possibly be an issue with the latest version of GSAP – I was using TweenMax 1.19.1 then. I've experienced these issues in two different browsers, latest Firefox and Safari versions, which leads me to believe that they aren't related to a specific browser. Anyway, as for what the issues actually are, I'm having two (or maybe three) different but possibly related problems. You'll probably have to watch the animation in the Codepen for a moment to see the issues appear (usually happens within a few seconds though, max. 30 Seconds) : sometimes, usually within the first few animation cycles, the image being animated is being scaled from 0 up, even though that should never actually occur because the value being scaled from/to should always be higher than 1; the scale values I'm using reflect this fact if printed to console. sometimes the animation simlpy ends or pauses for 1 or more cycle/s. When it does end it just seems to die completely. I'm not sure whether it would resume if I waited long enough, but I don't think it ever would. sometimes the image disappears and same as before, the animation ends/hangs up and usually refuses to continue. I've tried a couple of things: using fromTo() in place of to() adding a timeout before the cycle restarts added killTweensOf($el) applied the animation to the parent Div, but the same issues occur (which excludes the image itself as the culprit, I think) tried using parseTransform: true after reading about that on these boards Any ideas what the issue might be? Am I missing something obvious? Thanks a lot for any help!
-
Hi, I'm trying to scale the mask in the centre of an SVG to scale up to reveal text below, but the end result doesn't keep the mask in the middle. https://codepen.io/jimijbob/pen/Jjdermj Credit to @Sheilab67 for the original codepen. Any help would be very much appreciated. This is my first attempt at TweenMax so please be gentle. Many thanks in advance J
-
Hello GreenSockers, You guys are so awesome and thank you for providing this platform. Today, I saw this beautiful accordion animation https://uimovement.com/design/beaches-app/ and I want to create the same effect using GS. Is it possible to create this effect using in GS? Thanks in advance.
-
Hi all, I've been using GSAP for awhile now, but am new to using Adobe Animate with GSAP. This is probably a simple question, but I can't seem to find out why scaling up objects in Adobe Animate using GSAP causes those elements to become extremely pixelated. Is there some kind of setting I am missing in Animate? Thanks!
-
Hello, as you can see I'm new to the house. LOL I am now starting to use GSAP, and have a website that I know it uses, would like to know the best code to create this animation to load with percentage of the page, with hide in the image and show after the animation. Take the example: https://www.melville-design.com (site using greensock)
-
Hi, i'm trying to recreate the following hover effect with GSAP: Right now i'm trying to figure out how i set the transform origin correctly. The element that I want to tween is initially translated so the animation starts at the wrong position. Hope someone can explain me how to fix this. Here is my Pen: Thanks
-
Hey there, I've got this SVG map of some counties. in it, I have some markers, that serve a purpose on a live site, however I can't seem to get the little markers to line up properly in Safari only. I pasted it into a codepen with minimal code, and see that it is indeed the case on my Safari, but not on either Firefox or Chrome. Can anyone help me get those lined up for Safari users?
-
Hello, I am novice, but i really impressed with this. I want to make product detail page having animations like this website: https://www.etq-amsterdam.com/store/product/men/low-3-timber/ When you click on product image, it will zoom it to full screen having pan effect. Also, when you scroll it, image will scale accordingly. I think they are using tweenmax, but i didn't able to crack it. Could you please help me with this? Thanks, Keyur
-
Good Day Fellow GreenSockers, GreenSock has recently released a new video tut on a new ease called ExpoScaleEase for smooth scaling and zooming. https://greensock.com/docs/Easing/ExpoScaleEase This video tut was made by the Mighty @Carl, take it away Carl: If you haven't already done so, please check out and subscribe to the GreenSock Learning YouTube channel for more video tutorials. This way you don't miss out on new features and great learning videos from GreenSock. Happy Tweening
-
Hey guys I've got a question concerning transformOrigin behaviour and why there is a difference in end-location of a group in SVG; Why does this; tlBalloon1.addLabel("start", 0); tlBalloon1.fromTo(balloon1, 0.35,{ css: {y: 0, opacity: 0, scale: 0.25}}, { css: {y: "-=10", opacity: 1, scale: 1, transformOrigin:"right bottom"}, ease:Back.easeOut.config(3)}, "start"); tlBalloon1.fromTo(balloon1, 0.35,{ css: {rotation: "-=20"}}, { css: {rotation: 0, transformOrigin: "right bottom"}, ease:Back.easeOut.config(3)}, "start"); Pen A have a different outcome then this; tlBalloon1.addLabel("start", 0); tlBalloon1.fromTo(balloon1, 0.35,{ css: {y: 0, rotation: "-=20", opacity: 0, scale: 0.25, transformOrigin:"right bottom"}}, { css: {y: "-=10",rotation: 0, opacity: 1, scale: 1}, ease:Back.easeOut.config(3)}, "start"); Pen B OKAY guys I found out myself. It appears when I start with offsetting attributes and I would like to transform to original I have to set transformOrigin in altered from-section.
-
The animation is not like I want, it should have a typical collapsing expanding experience. If you click the "Expand/collapse", you'll expand/collapse the content. It doesn't have the expected animation of the height when is scaling , when I click close (X) it shold do the reversing animation. Content should be pushed. console.log('click 1'); TweenMax.fromTo(".Tile.is-expanded .Tile-flyout", 0.8, { scaleY:0 ,transformOrigin:"center top", autoAlpha:0, ease: Linear.easeNone }, {scaleY:1, autoAlpha:1,}); TweenMax.fromTo(".Tile.is-expanded .Tile-flyout > *", 0.8, { scaleY:2,transformOrigin:"center bottom", ease: Linear.easeNone }, {scaleY:1,}); console.log('click 2'); TweenMax.fromTo(".Tile .Tile-flyout", 0.8, { scaleY:1 ,transformOrigin:"center bottom", autoAlpha:1, ease: Linear.easeNone }, {scaleY:0, autoAlpha:0,}); TweenMax.fromTo(".Tile .Tile-flyout > *", 0.8, { scaleY:2,transformOrigin:"center bottom", ease: Linear.easeNone }, {scaleY:1,}); Demo: