Jump to content

Search the Community

Showing results for tags 'scale'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


  • Learning Center
  • Blog


  • Products
  • Plugins


  • Examples
  • Showcase


  • FAQ


  • ScrollTrigger Demos


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. 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>
  2. 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}]
  3. 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
  4. 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
  5. 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!
  6. 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
  7. 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.
  8. 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.
  9. 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.
  10. 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!
  11. 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
  12. 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.
  13. What am I doing wrong here. On mouse hover it should enlarge the text hovered. On mouseleave it should scale back.
  14. 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!
  15. 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)
  16. 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
  17. 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?
  18. 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
  19. 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
  20. 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.
  21. 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:
  22. Hi, I'm trying to make an element tween from off screen and land on a point while scaling down. I currently have the element scaling down and moving position but I don't want it to start scaling down until it gets closer to the red box. Any advice or guidance would be great.
  23. nick2price

    Scale image up

    Hi all, once again apologies, it will not let me fork a codepen so I have to use https://jsfiddle.net/z69w9u4g/47/ So I am using Scroll Magic, in my example I have place a dummy section so you can see the effect. So as you scroll down, you will see that the image scales up to 1.2. This is fine, and seems to work without issues. What I am trying to do however is this. I would like to give the image an initial scale of 0.5 and then scale up to 1.2 as you scroll down. Is there any way to give the image an initial scale of 0.5? Thanks
  24. Hey, The scaling effect is a little bit crazy - but nice: While the SHARKS set centered on the path they swim away when scaling down. What is the reason for this? I didn´t touch ...
  25. I'm getting pixelation when using pixi.js sprites with gsap. I doubt this is a gsap or pixi problem, I'm sure it has to do with how I'm combining them. in the codepen example: pixiBug on left is pixi.js & gsap and we're getting pixelation on scale down domBug on right is DOM & gsap and edges are smooth no matter the scale. What am I missing here? Thanks!