Search the Community
Showing results for tags 'height'.
Found 22 results
-
Hello everyone, I'm currently learning ScrollTrigger to replicate thescroll animation showcased on: https://olio-midnight.framer.website/ The one where the image transitions over the title while the title subtly scales down. Here's my progress so far on CodePen: https://codepen.io/headlessNode/pen/vYMEzxw While the animation is taking shape, I've encountered an issue with whitespace at the end when manipulating the Y value of the image. I've attempted to adjust the hero's height via ScrollTrigger, but it's resulting in an undesired effect where the height reduces and then reverts to its original state upon animation completion. I could use some guidance on which properties to modify or utilize to achieve the seamless transition seen on the referenced website. Any assistance you can provide would be greatly appreciated. Thank you for your time and expertise.
-
Hello GSAP Community! I found that I very often have problems with GSAP ScrollTrigger when my layout fully consists of flex-items. For example, I found that official demo: https://codepen.io/GreenSock/pen/zYeoqod But it was really easy for me to 'break' it by adding just one simple CSS line 'display:flex;' I just added div-wrapper, and made it 'display: flex;' - and the page don't longer scroll completely. I use Framer for building websites and it almost fully consists of flexbox items. Can I read somewhere what caveats are when using gsap with flexbox? Could you please explain how to make it work with flex elements? Thanks
-
Hi there, This is my first post, so apologies if this has already been raised. The referenced Gsap 'Cover Layered Sections' functionality is close to what I am looking to achieve, though the only issue I have is that my content in each 'section' is deeper than the screen vertical height as shown in the codepen demo. The demo changes the state to fixed hence why it cuts off the content below the screen depth. Is there a way to have the same overlap effect, though it allows to scroll to end of section, rather than hiding beyond the screen vertical height? Thanks in advance. Kev -
As you can see from this gif, for some reason my <section> is doubled (the original one is 100vh and with a bg of light blue), why does it happen? How can I fix it? Because I dont want another 100vh of unused space. Im new to GSAP, so im still learning. In the codepen I made the background of the parent pink to make it see better.
-
Hello, the structure i want to make is actually auto height at the top and layers from the bottom, and then the last part is independent of the layer. For this I am sharing the image
-
Hi there! I would like to have a pinned section with images on my page. Using scrolltrigger they should fade in one after the other. If I have a mobile viewport and three images, all landscape but with slightly different ratios I want the container to be the height of the smallest image. The other two being too big, can be clipped with overflow: hidden. On landscape viewports max-height should be 100vh. I am struggling when and where to find out about the height of the smallest image and set it to the container. My thoughts so far: - I have to wait until the images are loaded (> window.onlad) otherwise clientHeight is 0 - If I use the container as trigger, I cannot change the height anymore - so I tried to include putting also the Scrolltrigger into the window.onload However this does not resize correctly when resizing from super landscape back to portrait viewport ... and above all I expect that this is not the best option at all Glad about your inputs! Thanks!
-
I'm trying to expand the content using GSAP, so I can have the height animated of the hidden content. If you click the "Sterilisers" button/product, you expanding the content. I applied GSAP but with not the expected result. Please advice what's the best way. $('.js-tile').richTile().on({ 'expanded.RichTile': function(event, tile) { // disable siblings on expand var siblings = tile.element.siblings('.js-tile'); siblings.richTile('enable'); siblings.richTile('collapse'); var currentTile = $(this); var $tiles = $('.js-tile'); $tiles.not(currentTile).addClass('not-expanded'); console.log('click 1'); TweenMax.from(".Tile.is-expanded .Tile-flyout", 0.8, { height:0 , opacity: 0, autoAlpha:0, ease: Power1.easeOut }); // re-enable when this tile is collapsed tile.element.one('collapsed.RichTile', function() { siblings.richTile('enable'); $tiles.not(currentTile).removeClass('not-expanded'); console.log('click 2'); TweenMax.from(".Tile-flyout", 0.8, { height: 0, opacity: 0, autoAlpha:1, ease: Power1.easeOut }); }); } });
-
Good day, I'm new to GSAP and wanted to see if someone can point me in the right direction here. I'd like to extend a div in height on scroll, after the end of the page has been reached. I looked through the forum and examples, but didn't quite find what I'd like to archive. Appreciate any help! Thanks, Johannes
-
I'm doing an animation to show an order summary, I want first expand the width and then the height to create a fancy effect but seems that height is being seated wrong because in the end of the animation it has an extra height not desired. Help! Both tweens works well individually but the problem is when I put them together. Expected: Current:
-
Hi! I've made a quick codepen showing a problem with animating height/display property smoothly. As you see in the codepen, when you click "Open content" - some content below will "jump" to a new position because the hidden content will take up space when being displayed. Any idea how I can smoothly make this transition from hidden/visible with height so that the content below will not jump like that?
-
Hello, I have some unexpected (for me) behavior while sizing elements, here is the pen: As you see, red box is not synced with blue while animation runs (after clicking). It happens because the height of the container is animated, but it is not supposed to be, as the .clicked (container css class) doesn't contain height property. Can you explain please, how to animate only properties defined in target class?
-
Hi all, i've a little problem i tried to resume in the attached codepen. Say i've layout made of many containers, and i have an image i want to be displayed with an animation, a vertical toggle. The very same code, only works if i've set, at JS line 29: .from($target.find(".myImage"), 0.5, { width: 0, ease: Power3.easeOut }) while it does not, most of the time, if i try: .from($target.find(".myImage"), 0.5, { height: 0, ease: Power3.easeOut }) What am I missing?
-
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:
-
Hello, I made a codepen page to illustrate my issue. Basically, I have a black box that tweens its' width and height properties, then tweens down Y 150px and tweens its' width and height again. However, when I resize the page, I need to change the Y and width and height coordinates. How can I do this when it's written in the script? Can I save the coordinates as variables and somehow change them when the browser resizes? Thanks!
-
Hi Carl, It's me again. I have been coding an animation using GSAP recently and I came across a case that works fine in Chrome and Firefox but act strangely in IE including IE11. I eventually found a workaround but I thought maybe it would be something that the GSAP team want to take a look into. The problem appears when we have a <div /> with "height:XXpx" and "padding:XXpx 0" and we only want to animate this <div />'s padding to a different size. The truth is that the height doesn't change in the animation at all but... The problem: If we provide only the target padding, all the browsers including IE act normally with correct animation, but as soon as we also provide the target height which is practically the same as the initial height, IE animation gets ruined (other browsers still work correctly). When one inspect the elements, it can be seen that the height is being decreased during the animation in IE and comes back to normal at the end. Workaround: Not to include the height in the parameters, but this only works if we don't want to change the height during the animation. *) One thing that might or might not be the reason is that I have used a <svg /> element directly inside the <div /> which is being animated. Thanks for your attention in advance.
-
I've got a list of items. Filters are clickable that hide all but the items in that category with a sequence that fade opacity and height to 0. When showing all, items currently at opacity and height 0, fade in correctly, but height "pops" in immediately. Am I missing something obvious here? Also, is there a more appropriate place to post than here? SO perhaps?
-
Hi there. This seems rather simple but actually might not be as a simple of a solution as I was hoping for. I'm trying to transform the height of a div: #mountain { position: absolute; top: 175px; left: 18px; width:123px; height:46px; background-image:url(mountain.png); } Using this GSAP TweenMax.from('#mountain', .5, {height:0, transformOrigin:"bottom"}); On <div id="mountain"></div> However it does transforms the height, it scales the div from the top down regardless of the transformOrigin setting. What am I missing? I suspect transformOrigin does not cover height? Can you suggest a workaround for what I'm trying to accomplish? Thanks.
-
Hey guys! I have a div with text placed inside a container with a flexible width which means that depending on the screen width the height of the div will change. I would like to tween the height and alpha so that they start at height: 0px and autoAlpha:0 and on click the height increases to 100% of the text as it fades in. The provided example is part of a much larger timeline in my project and all other aspects of my gsap code are working great. I have read through other demonstrations using the set property, but I have not seen this working with TimelineMax, only with TweenMax. Is there something else I need to do to get my text container to start at 0 and tween to auto? Much appreciated!
-
Hello, Im trying to find away to infinitely scale an image. The only way i can think of is using a recursive function. I tried to use 'repeat: -1, but it just restarts the tween from the beginning value of the css property. start(); function start(){ TweenMax.to($(img), 4, { css:{ scale:'+=0.5' }, ease: Power0.easeInOut, onComplete: function(){ start(); } }); } I was wondering if there is a better way using TweenMax or TimelineMax to infinitely scale an image? Either using (transform) scale or width and height (css or dom). Basically I want to keep animating the value up, infinitely. By incrementing up, infinitely. Any help will be highly appreciated! Thank You!
-
Hello, i have already asked this question in the following thread: http://forums.greensock.com/topic/6964-constrain-scaling-to-avoid-mirror-efects/ The solution was to set the minScaleX and minScaleY to 0 and that worked, but now I need to constrain the width and height of a transformItem, not the scale. So, i used the minWidth and minHeight properties of the item. At the beginning its seemed to work, however if I keep scaling beyond the min values, the item will eventually jump to negative scale values. I think its a bug but i don't know, any help will be greatly appreciated. Here a .fla that shows the problem: https://www.dropbox.com/s/wx6vtjho4vn0t9k/TransManager_MinWidthBug.fla Thank you. -
hi.. i'm trying to animate a div expanding and collapsing by animating the css height property with TweenMax TweenMax.from(testDiv, .35, {css:{height:0}, ease:Cubic.easeOut}); this only animates the background of the div it seems.. not the text that's in it. the text is always visible. here's the div <div id="testDiv" style="position: absolute; background-color: rgba(255, 0, 0, .5); width: 320px; height:260px;"> </div> i've tried jQuery slideDown() and this works hiding and revealing both background and text content any ideas? i'd rather use TweenMax for this
-
Hello, I was looking in TransformItem class, I have minScale there, but i need somenthing like minDimensions method. There is a recomendation to implement this functionality. Thank you
