Search the Community
Showing results for tags 'flexbox'.
Found 9 results
-
Hi there! I am just looking into ways to animate things without using position absolute and left and right properties. with flex I can center something in the middle of the page very easily. How would I go about animating something from right to center but not using position absolute? Cheers
-
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
-
Hello, I want the images on sections TWO and THREE to be revealed by changing the flex-grow on .scrubScroll__dark to 0. So it would be: Scroll to section TWO Pin section, as user scrolls down reveal image (.scrubScroll__dark flex-box to 0) Keep scrolling and section THREE appears on top of section TWO I want the same funcionality for section THREE. I tried using onEnter and onEnterBack to call the function to change the flex-grow value, but is seems to run on page load, not on entering the section. I also tried using timeline, but couldn't get that working either. I'm new to gsap in general. Any help would be very much appreciated ?
-
Hey everyone, I have recreated the card animation from the iOS app store, but having problems with the positioning when wrapping multiple cards on to one line. In the attached pen, when the user clicks a card, the card should expand to the whole screen and at the same time reposition to the top of the viewport. The animation works great for the first card in each row, but every card after that in a row will not travel to the top of the viewport and stops about halfway up the page. Anyone have any suggestions on how to correct this unwanted behavior?
-
Hi, Each time I click on the button, I add a new (.box) in the list but I want to smooth the position of the others boxes (see my codepen) and still get the content vertically centered. As you can see I used flexbox. Thanks for the reply.
-
Here is an animated "wordcloud-ish meets bubblechart-esque" data viz exercise attempting to replace heavy packing algorithms, d3.js, etc. with some short, simple, sweet GSAP and exploit CSS3 flex-box's flex-wrap. The idea is to allow a fixed collection of words to grow/shrink (coming from a stream of PubNub "votes") in place without overlapping. Essentially nudging/hugging their neighbors but maintaining the overall position. For my needs it's working beautifully, until a "line-break" occurs. Curious to know if any of you might have ideas for smoothing out the "jump" when a word needs to hop onto the next line? Or perhaps I'm missing something easy by incorporating GSAP's split text.
-
Hi, I'm trying to use TweenLite to tween in the width of the blue sidebar down to zero. Unfortunately, the content of the blue sidebar breaks outside of the bounds of the parent. This is something that really should never happen with Flexbox, but the child elements are also Flex containers so I'm sure what I'm doing wrong here. If anyone has any suggestions please let me know. Thanks! Here a link tot he live demo: https://jimtheman.github.io/Flexbox-Push-Drawer-Example/#/ And here you can read the source code: https://github.com/JimTheMan/Flexbox-Push-Drawer-Example/tree/gh-pages ps. Id like to get this working, but I'm wordering if there is a way to get the center green piece to stretch to fill the container as the blue column shrinks without using Flexbox.
-
I am hoping this a cut and dry question (since CodePen for whatever reason will not work). I am trying to change the CSS class of flex container by changing the "flex-direction" class from row to column. It works - meaning it changes - but with no animation. I found out that its listed on MDN as a non-animatable class. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties I am a green developer and was wondering if its possible to animate this class with GSAP. http://codepen.io/anon/pen/YwxLWx -- this doesnt work at all in CodePen (JQuery missing I am guessing) Thanks in advance!
-
Flexbox is the modern way to lay out an interface, however it still needs vendor prefixes. At the moment I'm using: TweenMax.set(element, { display: "-webkit-flex" }); ... which supports Chrome, Safari and iOS, it would be great to have this work for all browsers by display: "flex". Why don't I just do this in CSS you ask - I have a couple of plugins heavily utilizing Greensock (think carousels, tabs, etc.) that I need to be JS only, so defining the essential structural styles in code is necessary. For me flexbox is the best and cleanest way to layout a carousel or sliding tab content (using Draggable). I imagine the infrastructure is there to accommodate this essential CSS property. It would be a great addition to your CSSPlugin.
