Jump to content
Search Community

Search the Community

Showing results for tags 'menu'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 24 results

  1. I would like to make the menu with the smooth magnification effect like the dock in macOS. I took this example as a basis https://codepen.io/osublake/pen/BZNGyd but the animation does not work smoothly and only starts when you move to the next or previous element. Is it possible to make the animation work smoothly and work at the slightest mouse movement? As in this example https://codepen.io/icebob/pen/bNZrEN Any help with this question would be great.
  2. Chronic

    Circular menu

    Hi, I've been trying to make a menu like this: https://maxilla.jp/ where the menu is a carousel and moves when you scroll, drag, or click. I'm guessing I have to use scrollmagic for the scrolling part, but I'm kind of lost. I just want to be able to scroll and the next item follows in sort of a circular path, like a carousel without arrows. 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. Thank you all for your time!
  3. Sukru

    ToggleClass Button

    Hello, I want to close the content that I opened with the Menu button with the same button. I use scroll pause when opening the menu, but to cancel it "smoother.paused(false);" I have to use is there a method like toggleclass for this? Can you help me? The code i use; $(".hamburgerMenuOpen").click(function () { smoother.paused(true); $(".menu").addClass("visible"); }); //Hamburger Menu Close $(".hamburgerMenuClose").click(function () { smoother.paused(false); $(".menu").removeClass("visible"); });
  4. http://clients.super-agency.com/test/index.html Hello, I made a menu with gsap, but after clicking on a different link from this menu and going back, the menu remains open, I couldn't find a solution, can you help? Where am I doing wrong? Menu code const ham = document.querySelector(".ham"); const menu = document.querySelector('.main-menu'); const links = menu.querySelectorAll('li a'); const menulist = document.querySelectorAll('.menu-list'); var tl = gsap.timeline({ paused: true }); tl.to(menu, { duration: 1, opacity: 1, height: '100vh', ease: 'expo.inOut', width: "100%", }) tl.from(menulist, { duration: .5, opacity: 0, height: '100vh', left: '0', ease: 'expo.inOut', }, "-=0.5"); tl.from(links, { opacity: 0, duration: 1.2, ease: "power4.out", y: 320, stagger: 0.1, }, "-=0.1"); tl.reverse(); ham.addEventListener('click', () => { menuBar.reversed(!menuBar.reversed()); tl.reversed(!tl.reversed()); }); var menuBar = gsap.timeline(); menuBar.to('.bar-1', 0.5, { attr: { d: "M8,2 L2,8" }, x: 1, ease: Power2.easeInOut }, 'start') menuBar.to('.bar-2', 0.5, { autoAlpha: 0 }, 'start') menuBar.to('.bar-3', 0.5, { attr: { d: "M8,8 L2,2" }, x: 1, ease: Power2.easeInOut }, 'start') menuBar.reverse(); Menu Codepen Code https://codepen.io/r3khchand/pen/MWbJOwz
  5. I'm working on a menu that needs to react differently for mobile vs desktop. I got it working but when I change the viewport width, the animation and reverse animation are bugged one time, after that they adept to the 'new' situation. On browser refresh it also works correctly. Can anyone point out why the animations don't work correctly when changing the viewport width the first time? If I look in the inspector I see the values being being used are still from the other timeline, even though the new screensize is active.. Item 2 slides out a sub-menu, other items should do the same but I left that out for now.
  6. My gsap menu works fine. The problem is, when I click any other "<a href>" on the page, the menu will open too. You can check my codepen. I don't know, how to solve this. Can you please help me. It includes Chrome, Firefox. Not tested in IE. Thanks in advance
  7. 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!
  8. Hi there! I've been hassling with this issue for a few days now and I can't come to an understanding of why this won't work. So as you see there is a menu that slides out on click of a button and slides back in when it's clicked again. Now I'd like to give the right pane of the menu a different background color which appears just after the menu slides out. When the menu slides back in, the right pane should reset and when the menu is slided out again, appear when the slide-out animation is complete. You get the idea I hope. I've tried putting the two tweens in a timeline together, but then the sliding animation of the menu won't work anymore. Am I just totally missing a point or am I making things difficult for myself? I would love to hear your ideas! ~ David
  9. Basically, Im trying to get an animation (#dd-heading) to trigger when the user hovers over nav button(.dropdownmenu-button) that triggers dropdown with animation in it.... but it only seems to trigger the first div and the rest dont trigger. Similar to this - https://www.open-wear.com/ //gsap animation of elements in dropdown navigation var toggle=0; var tldropdown = new TimelineMax({paused:true}); var items = $('#dd-heading'); var list = $('.dropdownmenu-button'); tldropdown.staggerTo(items, 1.5, {x:20,opacity:1,delay:.5}, .5) .addPause(null,function(){ if(toggle)tldropdown.play(); } ) .staggerTo(items, 1.5, {x:20,opacity:1}, .5) function over(){ tldropdown.restart(); toggle=0; } function out(){ tldropdown.play(); toggle=1; } list.hover(over, out);
  10. 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
  11. I have a multi-stage menu animation that I've been tinkering on for a while now. I have finally got it to work, but it only works once all the way through and then it breaks when you try to revisit the menu a second time. For the first part, the chopsticks grab the fish on hover. If you leave the sushi menu without clicking, the animation reverses. The second part happens on click. The fish is consumed as the menu expands and the chopsticks cross to form the closing button. The third part is a second click that closes the menu and reverts the sushi menu to the initial position WITHOUT reversing the previous animation completely. Again, it works for the first go, but anytime after, it doesn't perform the second and third parts and the first part gets wonky. I created a Codepen, but it didn't seem to want to work there like it does live. You can see the entire site and my menu animation at http://sushi503.com. I have tried doing a single timeline, a master timeline with child timelines and finally separate timelines, which has been the most successful. Thanks in advance!!
  12. Holla, I need to reset the animation when I close menu and open it again how can I do that ?? annimation works only the first time when I open menu !! thanks for help.
  13. 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?
  14. Please Help Guide on this issue. Thanks in advance to those that pitch in Here's an example demo (still private) I'm creating to show how Draggable can be used to create an off canvas menu. http://codepen.io/grayghostvisuals/pen/569ffceac4b0c1b3958ade9bd189ad94 A couple issues I'm running into: 1. The red bg is to show the target region. I want the menu to allow drag actions to open the menu when a user's finger drags over the top of the document (not just a small portion of a region). The menu also hides completely when it's closed. The previous example linked in my demo from Carl's original pen had the menu showing 15 pixels when closed. Need some guidance on how to improve the current demo I'm building. 2. Links in the main document body are not clickable and I think I'm missing the explanation in the docs. Maybe some direction how to make these elements clickable so the menu swipe region does not negate those clickable items.
  15. Hello, is it possible to make a ios like drag menu, where I can "throw" the menu open? Maybe with throwProps plugin or so... I don't know, I am new to GSAP I mean something like you can see here: https://www.youtube.com/watch?v=hbuL-vUDBhg&feature=youtu.be&t=32s What I mean happens at 32s I've already tried it out as you can see in the codepen example. Greetings, luneyard
  16. 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!
  17. So I'm wondering how I can create a menu like this (Yes, I did kinda copy stagger example from GSAP sorry) but for the .btn elements to initially not display (ie; display:none instead of just no size). then when the 'Click' button is pressed, the .btn elements animate onto the screen. I can get it to work once but after i have clicked one of the buttons and they off, they will not come back. Any help would be greatly appreciated.
  18. Helly everybody, I was hoping someone out there might be able to provide some info on applying the greensock throwprops plugin to a vertical scrolling nav menu for an android app. I have tried modifying the code from the throwprops page, but it uses a textfield, i want buttons inside a movie clip... Is that even possible? Can anybody point out any useful tuts or articles? or would someone like to view the file? Thanks a bunch everybody, Alex
  19. Hi everybody! By advance, please excuse: 1. my english (I'm french, and I don't find any good answers about Gsap on french forums...) 2. my less of knowledge about coding... I know what is Code for.. 2 weeks.. 3. my (a bit) blonde brain.. But I got faith and I'm ready to learn!!! So, here's the situation: My final goal is to make a full personalized menu for my blog, that contains very seamless animations. The first animation (which I'm testing now) is color changing of the buttons' letters. The second one will be the "deployment" of an image that "get out" behind each button and then come in. Both animations will start "on mouse over" and when the button is clicked and the relative page is activated. My first question is about the first, simple animation: color of the buttons. What I'v already done: - created a drawn menu on Gimp - created the same image but with each button in right color for activated state - I've search for a few weeks on tutorials and forums, and found a code that works "A code that works"... BUT: it seems to work only on certain machines (don't understand why it works on my mac on Google Chrome but not on my office's PC on Google Chrome too!) and most of all, it is no seamless at all! (got to wait a few seconds with mouse over before the -images charge and- color changes. I read some interesting stuffs about the "wonderful Gsap library". But it's very difficult for me to understand how to make the right gsap code that is very complicated for me compares to my actual code (I don't even know if it's "simple javascript" code or something else - you will see that). Could you please give me a simple explanation of what I need to do in my case, or even indicate the right code to me..? Here's my code: <div> <img name="Menu" src="https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%C3%AF%20crash%20test%20gelly%20texte.png" width="960" height="95" border="0" usemap="#menu jelly kobai" /> <map name="menu jelly kobai"> <area title="Accueil" shape="rect" coords="4,27,117,93" href="http://kobai-uneblondeetblogger.blogspot.fr/" onmouseover="document.Menu.src='https://photos-4.dropbox.com/s/dsltunaowxbg0e3/menu%20bouton%20accueil%20survol.png'" onmouseout="document.Menu.src='https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%c3%af%20crash%20test%20gelly%20texte.png'" onclick="document.Menu.src='https://photos-4.dropbox.com/s/dsltunaowxbg0e3/menu%20bouton%20accueil%20survol.png'" alt="Accueil'" /> <area title="Une Blonde et Blogger" shape="rect" coords="128,27,245,94" href="http://uneblondeet-blogger.blogspot.fr/" onmouseover="document.Menu.src='https://photos-4.dropbox.com/s/f9khuaph4qqhnk3/menu%20bouton%20blonde%20survol.png'" onmouseout="document.Menu.src="https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%c3%af%20crash%20test%20gelly%20texte.png'" Onclick="document.Menu.src='https://photos-4.dropbox.com/s/f9khuaph4qqhnk3/menu%20bouton%20blonde%20survol.png'" alt="Une Blonde et Blogger" /> <area title="Onglet test" shape="rect" coords="255,27,369,94" href="http://kobai-uneblondeetblogger.blogspot.fr/p/un-onglet-test.html" onmouseover="document.Menu.src='https://photos-4.dropbox.com/s/7h3uglfwgxjk0uu/menu%20bouton%20onglet%203%20survol.png'" onmouseout="document.Menu.src="https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%c3%af%20crash%20test%20gelly%20texte.png'" Onclick="document.Menu.src='https://photos-4.dropbox.com/s/7h3uglfwgxjk0uu/menu%20bouton%20onglet%203%20survol.png'" alt="Onglet test" /> </map> </div> Sorry for the entire code, I've searched in it but didn't find this widget's code - ?? (it's a HTML/Javascript widget in a Blogger blog. url of my "testing" blog: http://kobai-uneblondeetblogger.blogspot.fr Thanks a lot by advance for your help! Trinita Girl
  20. Hey there Greensock Guys, I've got a small brainteaser I could use some of your assistance with So I've got a site with a nav that is using good old CSS transitions to achive a hover effect. I've stripped it back and created a simple copy you can check here: http://webslinger.com.au/GS_hover_test/test_1/index.html So in an effort to make the animation accesible across the board (*ahemcough* for older IE browsers) I just tweaked the nav a little and used the GSAP to achieve the same thing: http://webslinger.com.au/GS_hover_test/test_2/index.html However when you move the mouse cursor from the menu header or its empty space on to an sub-menu title it's tripping the mouseout function, and there's a slight hiccup in height every time you move to a new list item. Now I know you typically run into this problem with hovers (as opposed to clicking) and I've managed to get around it for the most part, and I've tried a couple of different approaches - like putting a delay on the mouseout, so when you rollover a sub-menu title the hiccup essentially never happens - but haven't been successful. Tried to do a bit of digging and homework first, plenty on Flash/AS forums about this, but nothing I could find for JS, appreciate any input you boys can give. Cheers
  21. Hi people! Help me please! I have this package code for a section menù. I have on the stage 4 menù item (name:swf1,swf2,swf3,swf4) and have one progress bar (name:progress_mc). I have in the folder "swf" 4 swf (name:swf1,swf2,swf3,swf4). I start with load swf and then when I click on one of the buttons load the swf corresponding (by the istance name). I would like to implement this code whit LoaderMax for load/unload this external swf and mark the progress bar. But I can not do! someone can help me? Tnx! package { import flash.events.MouseEvent; import flash.net.URLRequest; import flash.display.*; import flash.events.Event; public class caricaredatiesterni extends MovieClip { var defaultSWF:URLRequest = new URLRequest("swf/swf1.swf"); var loader:Loader = new Loader(); public function caricaredatiesterni() { var swf=new Array(swf1,swf2,swf3,swf4) for(var i:int=0; i<swf.length; i++) { swf.addEventListener(MouseEvent.CLICK, openSwf); } loader.load(defaultSWF); addChild(loader); } public function openSwf(e:MouseEvent) { removeChild(loader); var newSWFRequest:URLRequest = new URLRequest("swf/" + e.target.name + ".swf"); loader.load(newSWFRequest); addChild(loader); } } }
  22. Hello again, I'm now moving on to the menu. How do I setup the menu (styled it etc..), so what I want is that once you click on a menubutton it auto scrolls down to that page/section. And my question is. How do I do that? Because when I look at the demo of this I don't see any demo with an actual functioning menu. There is a lot about effects and animations, but nothing in it about how to make all of that work with a navigation also. Does anyone got some kind of tutorial on 'How to make a menu that scroll to page/section'? Maybe there is a tutorial somewhere that I have missed?
  23. Need help creating an iPhone style menu, similar to Angry Birds or Cut the Rope. It needs to use either Adobe Gesture Events or Greensock ThrowProps. I tried using the ThrowProps example, but I need it to stop on each menu item. The code below uses swipe left/right Gesture Events and TweenLite, but I need help adding an overshoot to the first and last menu item. Maybe by adding an 'if else' statement. import com.greensock.*; import com.greensock.easing.* var offsetX:Number = 440; // Swipe Gesture Multitouch.inputMode = MultitouchInputMode.GESTURE; stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, swipeHandler); function swipeHandler(event:TransformGestureEvent):void { switch(event.offsetX){ // swipe left case -1: { TweenLite.to(mc, 1, {x:mc.x - offsetX, ease:Expo.easeOut}); break; } // swipe right case 1: { TweenLite.to(mc, 1, {x:mc.x + offsetX, ease:Expo.easeOut}); break; } } } stage.addEventListener(Event.ENTER_FRAME, traceXPosition); function traceXPosition(evt:Event) { trace("movieClip Position: " + mc.x); }
  24. Hey guys, I am wondering if there is an easy way to convert a 'classic tween' or 'motion tween' to use the new AS3 TweenLite? Maybe a script of some sort? I have a project that has lots of classic tweens spanned across the timeline. I was hoping for an addon to the right click menu in Flash CS6 like 'Convert classic tween to TweenLite' or something as easy. Forgive me if this has been answered already as I have searched the forums and came up empty. Thanks in advance.
×
×
  • Create New...