Search the Community
Showing results for tags 'accordion'.
Found 16 results
-
Hi there, I'm working on creating an accordion that should function with both scrollTrigger and click functionality. I've attached an example that expands the accordion on scroll, but I'm unsure how to implement the click functionality to open it as well. Let me know if you can provide any help! Thanks
-
Hi all, thank you in advance for checking out my post! I have a video reference of what I'm trying to achieve here: https://assets.codepen.io/191332/comp.mp4 And here is the Codepen demo I have started. Note: Please view Codepen in a new tab / window and view in Full mode or increase the Codepen panel height to have a better visual of what is going on, ha! I'm stuck on understanding a few things in my forEach loop of text blocks (right column)... As noted in purple for each block, as the video shows, I'm trying to expand / show the first text block and collapse the other two. Then as I scroll into the second block, collapse the first and last block. As I scroll into the last block, collapse the prior two blocks, and keep this block expanded as you continue to scroll down the page. And two more things: Is there a way to get the current self.progress / percent value for each block so I can animate their progress bar? This is the purple vertical line in the video example that grows / shrinks based on current scroll / scrub. For the 3 text bocks, is it possible to pin or hold longer on the first block, say 50% of the timeline progress, and then the other two blocks for 25% each? Hope this demo and video make enough sense and any help to point me in the right direction is beyond appreciated! Thank you all so much!
-
Hello! I'm trying to make an accordion for a FAQ with some interesting border decorations. Animating it with pure CSS transitions technically works, but I wanted a smoother animation. Thus, I tried using Flip. However, if you will try going through different elements in codepen example you will notice that the accordion doesn't act as it should - the items jump around, even though it should be just an element height animation. In this case I used max-height to change the item size because it's the only way it can be animated via pure CSS transitions since height alone can't animate between size in pixels and auto (I tried height with Flip, same result). To see how it works with pure css (which is my desired way of movement) just comment out the Flip line from the JavaScript portion and uncomment the transition in .faq-item-container in CSS. This is what I'm getting with Flip when trying to jump between the items. Any advice would be appreciated
-
Hello all! It's been a while! I'm absolutely loving how easy and quick ScrollTrigger is to get the basics of ? I'm currently building a ScrollTrigger based carousel for a client, which is working as intended (for the most part). The difficulty comes when I have an interactive component above the carousel, like an accordion. When the accordion is open, the start and end points of the tween are not updated, which is causing the components to overlap. I've tried playing with `update();` and `refresh()` whenever the body height changes, but with no luck. Either I'm not understanding how to implement it, or perhaps there is a feature I haven't found yet? Steps to replicate in codepen: 1. Click on any item in the carousel 2. Scroll to bottom of page. The carousel works fine, providing no accordion items are open. Any help is appreciated, thanks!
-
Hello, I'm kind of new to coding world and making my portfolio. It's nice that I can use GSAP animation for my project. But I've been stuck with making Accordian menu. I declared some useRefs to controll the Dom elements with Gsap animation, as I read GSAP tutorials with React. and I made some timelines inside of useEffect, I made some functions to handle event and useRefs. It works when I don't type on input component that I created next to the accordion ('category') It's expanded to level 1 menus of category, and when I click the single menu(level 1), then the level2 menu is expanded. and If I click another level1 menus of category, the level2 menu that was just opened , is closed automatically, and the level2 menu for the level1 menu that I click currently is expanded. Also, if I click the main button(like header, it says 'category' in my demo) ,everything is closed automatically. But It doesn't work properly once I type something on input component. the level2 menu is not closed properly, Although I click another level1 menu. and When I click the main button, level1 menus are closed but the level2 menu that was expanded still remains. Guess reverse() animation doesn't work properly when I type or create another event. I made a simple version of demo , I commented out some other animations in Search.js (just in case if it helpful to understand about this problem,I didn't remove) main animation for this issue is in CateGory.js . Also I commented out some explanation about my code. I would really appreciate if someone can halp me. my demo
-
Hello guys, i need some help for a "simple" script that's driving me crazy... I've put an example on my code on codepen: https://codepen.io/SaverioGarzi/pen/wvMLYMJ The example is simulating the final results, but the code is messy, i would like to have a Timeline, instead of a simple tween, i have to add more feature with the click... The timeline should be play when i click on the accordion head, and reversing when i click again on the same accordion... But it shoud also reverse when i click on another accordion... I can't figure out the logic. This is what i'm using now: var togg = document.getElementsByClassName("service-card"); var i; for (i = 0; i < togg.length; i++) { togg[i].addEventListener("click", function() { $('.service-card').not(this).removeClass('service-active'); var $this = $(this), icon_plus = document.querySelectorAll('#services-plus'), actual_icon_plus = $this.find('svg#services-plus'); gsap .to(icon_plus, { rotate:0, duration:1, ease: "elastic.inOut(1, 0.5)" }); this.classList.toggle("service-active"); if($(this).hasClass("service-active")){ gsap .to(actual_icon_plus, { rotate:45, duration:1, ease: "elastic.inOut(1, 0.5)" }); } else { } }); } i've searched in the forum, and i found this snippet, tl.reversed() ? tl.play() : tl.reverse(); but i was not able to implement it... Can someone give me a hand with that? Thanks Petar
-
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.
-
I have some problems with scroll magic goes horizontal example. I have part of my portfolio website which I have some accordion images and I want them to expand to their 100% width as the people scroll the page. not by hovering. like what norgram.co is doing more or less but I just want it on my images. so I started to use the go horizontal structure of the magic Scroll and nothing is working and I don't know why. https://codepen.io/nargess-shabani/pen/oRvjGr#code-area help me, please. I am stuck.
-
Although it is hard to see, I have a slight blur in one of my rotation animations. If you look at the codepen accordion I created, the arrows that indicate whether a panel is open are rotated when a panel is clicked. You should notice a slight blur as the arrow is rotated. Is there a method to setup this animation so that this does not happen or is this a byproduct of using a font-awesome icon as an animated element? Any suggestions would be appreciated.
-
I am working on a simple vertical accordion menu and I noticed that the animations that I created run much slower the first time they are triggered and the correct speed every subsequent trigger. Is there something obvious that I am missing or is my javascript just hosed? Any help is appreciated.
-
Hi there! I'm a total newbie but already enjoying playing around with Greensock. I'm working on an accordion menu, and this is the behavior I'm going for: 1. User clicks on a menu item. 2. Menu item's panel is revealed. 3. A sequence of three animations is triggered within that one panel. 4. User clicks to collapse menu item and the whole thing is reset. Right now, the fader animation I have on animEvent is triggered on window load and subsequent user clicks change nothing. I'm thinking I need to use TimelineLite to start the animation when the specific menu item is clicked. But I'm very new to this and would appreciate someone pointing me in the right direction. Thanks! Hilary
-
I've been trying to create an accordion menu with GSAP. I have 3 menus and I want the others to reverse their animations when one is clicked. Each menu item also has a hover state.. which I think is causing my issue. If you click around on the menu items quickly, then sometimes an element is left with it's old boxshadow property. If you check out the codepen I think you'll get a good idea of what I'm talking about. Is there a better way to do what I'm trying to do? -
Hi guys, I'm building a bit of unique accordion where the sections are cards that swap on top of each other. the idea is to have the top one stuck to the top at all times. In order to set this layout up I've made the wrapper position relative with the sections position absolute with a top of 0; I'm making the tops of each section offset using translateY via js because the accordion needs to be dynamic. I'm almost there it feels but I can't seems. Howver my challenge now is to make is so when you have slide 1 open. if you swipe up from slide 4 to have slide 3 and 2 track up wards with the movement. I've got it behaving correctly via taps but I really need it work with dragging as well. any thoughts? Thanks! Jason http://codepen.io/OrganicPixels/pen/VaXbVV
-
Hi, I am trying to create an accordion menu using Greensock. Alot of the code I have used comes from this section of the forum. http://greensock.com/forums/topic/9110-accordion-menu-with-gsap/ Two things different that I am trying achieve are: Making 'one' open on page load. Add padding inside the content areas. (Seems to still add padding when the sections are closed.) Any help is much appreciated. Cheers, Phil
-
Hi, I have been searching for a good example of creating a simple accordion menu, but everything I have come across seems over engineered. 1_I really like the simplicity of this menu: http://codepen.io/ewe1991/pen/agfqA but can't figure out how I could convert the jQuery code to AS3? Does anyone have any ideas? 2_ Could this be accomplished using the blitMask plugin? For example: Set up: 3 mcs that each contain a tab panel portion and a content portion. Have the blitMask to be 1/3 th size of each mc and then when the user hovers over, have the height of the blitMask itself animate top down to reveal the content. --> So based on which mcs is targeted, I would set up a function that would animate the height of the mask and position of the mcs. For example, if user rolls over mc1, blitMask1 would expand down and whatever previously hovered over mc was open would collapse - the blitMask of that mc contracting in height, while the other one is expanding. I have been losing hair over this... Thanks guys!
-
Hi Folks, my first post to this forum. I've been using GSAP for Flash for years, but now trying to get a handle on working in JavaScript. GSAP for JS is a big help. I am working on a custom accordion menu and it mostly works, but has a bug where altering the "selected" look of a clicked button stops working after multiple clicks. i have created a CodePen project here: http://codepen.io/PawleyBoboli/pen/gjAxC Notes: I put this together from pieces of another example I found on the forum, but can't find again (sorry, too tired) I am using TimeLineLite to tween the addition of a class for the selected "active" item , and removal of the class for all others. It's working for the Module buttons, but for the Chapters inside a module, it stops highlighting your selection after clicking between 2 items repeatedly. Example:Open "SECTION MODULE 2" Click the 1st item - it highlights click the 2nd item - it highlights and the 1st one returns to previous state now click back & forth between them - all highlights stop working. I think my problem is related to the adding and removing of the ".activeChap" class but I am not sure. I have commented my code. Any help is greatly appreciated. --Kevin
