Search the Community
Showing results for tags 'grid'.
Found 15 results
-
Hello everyone! I have problems with the grid section, where each of the elements must in turn "open up" to the full screen. At the same time, it is important that the elements "feel" each other next to each other, so that each of the elements is pushed out of the screen. Right now my animation is not working properly, as each of the elements does not expand to the full screen. Please help me! https://codepen.io/karjala_kilka/pen/qBwyoab
-
code sandbox I'm new to GSAP and am struggling getting a certain animation to work using scrollTrigger when my elements are in a grid layout. The animation aims to move the content horizontally as the user scrolls, and I've taken out the relevant components into this code sandbox. Apologies if there's still too much code in there, but I wanted to make sure the code is representative of the components I have in my project, in case there are nuances causing the problem. In App.tsx, if you uncomment all the code, you'll find a grid layout containing a 'navbar' on the left, and the main content on the right. Currently, with the grid commented out, the animation works fine, but if you include the grid, it all breaks for reasons I don't understand. I've read through the common mistakes for GSAP and scrollTrigger and don't think this is covered. I also have a couple of other smaller issues as well please in the ExperiencePage.tsx component: toggleClass on scrollTrigger doesn't apply the .active class to components. the width variable isn't being updated as the browser window is resized, despite me setting invalidateOnRefresh to true and using a function to define the end attribute in the scrollTrigger configuration. Appreciate any help with this please.
-
I have a simple demo with a few elements that are inside a grid and currently they all appear at the same time. I would like the boxes inside the box-group animate in one by one. I tried adding "stagger: 0.5", but obviously it's not working. What is the proper way to do this? https://codepen.io/planetgrafix/pen/OJdywRa -
Hi everyone, I'm quite new to GSAP and would like to use the library for a project. I'm seeking some assistance regarding an issue I'm facing with the ScrollSmoother Plugin. Enabling the plugin is messing up the layout of my page. I have tried troubleshooting it myself, but unfortunately I haven't found a solution yet. The provided CodePen demonstrates the issue with a simplified example (SmoothsSroll is commented out in the example). I would be grateful if someone could give some guidance on how to solve this issue.
-
Hi everyone, I'm trying to implement this effect from this website https://isolation.is/. The grid moves by itself and the animation repeat itself as the items always go back to their starting position. Actually it's not only that, once an item goes past a certain point, the element is taken and positioned at the end of the div (so just append in js I guess). First of all I need to make the grid, in the website though there is no row (as in no parent div for the items) so I have a bit of trouble understanding how it's done. I guess I would have to use gsap.set on all my elements but how to calculate the space and offset needed and then the repeat ? I will post a codepen later as I started my project directly in local. Thank you
-
Hi, i tried to use, Gsap Flip to filter a grid of elements. The filter is inserted in the page in a fixed position so I can filter the grid from any position of the scroll. The strange thing that happens is that if I filter the grid with the scroll positioned at the bottom of it, the page will be scrolled up. I also tried to give a fixed height to the grid container, to avoid the bug, but the same thing happens. Is it a problem with Flip or am I using it wrong? https://codesandbox.io/s/shy-fire-3j0xc5
-
Hi all, on this demo, particles images load correctly but.. the interactivity seems totally gone: touchstart animation / mouseenter got strange issue (doesnt start at all) while adding gsap. Is something related how the script / canvas works? (Maybe because the canvas needs to see images as soon as possible (starting after img-loaded) , while using scrolltrigger to show and hide elements container cause a conflict?). I can avoid using scrolltrigger and show elem as is, but I was tryin' to make each of them, fadein staggered with GSAP. Thanks for any help
-
Hi all. After some digging I found that CSS grid elements cannot have animation when they are moved around within the grid, so I was wondering if there could be a JS solution to this. I posted this on Reddit first and someone directed me here. Basically what I want is, on a class change on the parent that has display: grid, the child elements will change position using grid-column-start and grid-row-start. I figured out this part, but not quite sure how to animate that change in position. What could be a JS way to achieve this since this is most likely not possible with CSS? Please correct me if I am wrong. My implementation minus the animation: https://codepen.io/sadmansh/full/VweEZqL The dots will move when you click the button up top.
-
Hi, I've been trying to make a gallery navigation like this: https://www.powerhouse-company.com where the menu is a gallery of images and moves when you drag the canvas and then you have the select to sort the diverse articles, the animation is beautiful. I'm guessing I have to use a plugin to do the sorting like they use (flickity), but I'm kind of lost on how to make the canvas. I just want to be able to drag my canvas in fullview and integrate it with images which would be Links. I'm not expecting any of you to tell me the answer. I'd be more than happy if you just simply point me in the right direction. And sorry if my english is not good, it's not my first language. Thank you all for your time!
-
Hello, how can i achieve multiple list divs? and it the items will drag only inside there own divs Thanks in advance! edit; please excuse my english. edit 2; what i want to achieve is have multiple <div id="list"></div>
-
Hello , I managed to find solution to drag content of TextBox up and down but its not stable . once you hold down the scroll-bar and start dragging its working but if u leave the scroll and try to do it again its not working Can i use GreenScok draggable to do that professionally ? I really feel sad i bought green-sock membership thinking that draggable will work fine but its been few days no success this is the example code i hope someone with experiance can guide me how to drag content inside Movie Clip at the stage using same concept " am using Adobe animate cc Canvas Project is attached . --- tl = this; createjs.Touch.enable(tl); linesOfTextF(200); function linesOfTextF(n){ for(var i=0;i<n;i++){ tl.TextBox.text += 'this is line '+i+'\n'; } } paramF(0, 48, 146-20 , 48+146-tl.TextBox.getBounds().height); function paramF(x1,y1,x2,y2){ tl.m = (y1-y2)/(x1-x2); tl.b = y1-tl.m*x1; } //this tl.sb.thumb.addEventListener('mousedown',startdragF); function startdragF(e){ stage.addEventListener('stagemousemove',dragF); stage.addEventListener('stagemouseup',stopdragF); } function stopdragF(e){ stage.removeEventListener('stagemousemove',dragF); } function dragF(e){ if(e.stageY>=48 && e.stageY<=48+146-20){ tl.sb.thumb.y=Math.floor(e.stageY-tl.sb.y); tl.TextBox.y = Math.floor(tl.m*tl.sb.thumb.y+tl.; } } --- Thanks test2.zip
-
Hello, Animation which I try to do, works well with computers or iPhone, but if it fires on Android it can munch, unfortunately, is not smooth. Maybe someone is able to help me in what I was doing wrong and how to improve? The code is a mess, but this is the first time I try to move animations from CSS to JS. The alpha version for phones was not very smooth and able to "trim". After using GSAP is much better, but it seems to me that it might be better. In addition, some questions (GSAP, JS, CSS): 1) The problem with the grid. I can not set the width (50%) plus a margin? The elements are in absolute position, otherwise when opening the remaining contents can jump. If I use the width: calc () animation can behave strangely. I tried to change position relative to the absolute (in animation), but without success. In the version of the tablet / desktop grid of 100% is replaced by 50% in 2 rows. 2) FadeOut flashes. I'm not sure what causes this? It seemed to me that zIndex, but probably not? 3) I do not know how to get 100% of the width div before animation? now the value entered is rigidly spoil responsiveness (width: '375.5px' or width '457.5px') 4) Literature, which will allow me to expand my knowledge? I know that's a lot, but maybe someone will help me? Sorry for bad english. Regards Links: http://codepen.io/Ard/pen/rLmRwK http://codepen.io/Ard/full/rLmRwK/
-
Hi all, I am reading through Google Material's motion guideline. There is one particular effect that is interesting yet I am trying hard how to do this in code. The page: Choregraphing surfaces https://www.google.com/design/spec/motion/choreography.html#choreography-creation Video: https://material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B14F_FSUCc01X1hUU2x6dWpQX1U/CreationChoreo_03_StaggerDo_v3.webm - I could put them into an array and display them one after the after from left to right and then drop to a second row and display the next set and so on. But how do I display them from left to right and top to bottom at the same time?
-
Hi guys I have a basic 3x3 grid with a simple 3d hover effect using GSAP http://steaklab.com.au/ctm/seven-wonders/ PROBLEM: I want to click a box and have it transition to full screen from where it is.. that is to say, the corners of a specific box clicked on animate to the browser window and proportionally shrink the other divs in the process. I'm wondering if this is possible with GSAP. ?? This is link of like a treemap see here http://bost.ocks.org/mike/treemap/ Any advise would be very welcome!
-
Hi guys, I'm trying to build a 2 way tween (in 4 quadrants) using TweenLite with the colorTransform plugin. I'm doing this on a stage with a mouse move listener, so for example: stage.addEventListener(MouseEvent.MOUSE_MOVE, mve) function mve(evt:Event):void{ var percY = (stage.mouseY / stage.height).toFixed(2) TweenLite.to(mc, 1, {colorTransform:{tint:0xff0000, tintAmount:percY}}); } This works fine in 1 direction (top and bottom), but I want it to work 4 ways - have a look at screenshot which hopefully explains it better.. As you move towards each corner, top left, top right, bottom left, bottom right - the color should tween to that target (i.e. 100% or 0% of stage in both directions) I hope this question makes sense, any help would be appreciated, a little bit of an AS3 newb. Cheers
