Jump to content

Search the Community

Showing results for tags 'navigation'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 16 results

  1. Hello, I was trying to make a hover function with GSAP with timelinemax. In this, there are lists of elements which on hover will take up an x position and moves back to original position on mouse out. But, here, when I move the cursor in between lists items, the animation doesn't stop, but instead, it waits for the previous one to finish. Traditionally in jQuery, this is achieved through stop() method. What can we do here? and how do we do it? Thanks
  2. Hi all, I'm trying to make a menu with SVG icons that morph into Xs and back on click. So far I can get them to morph and morph back as the menu closes but I'm stuck on trying to get one icon to revert back to its original shape when I click the other icon. Where am I going wrong?
  3. Hello, i'd like to start by saying thanks for an awsome library! Now to the problem: I have a navigation menu which should display a submenu when hovering a link. This works fine but when i drag the mouse over multiple links the animation displaying the submenu continues which looks bad go ahead and try in the codepen: https://codepen.io/anon/pen/wPPrLK?editors=1111). How can i make the animation stop? I did try to set tl.clear() like this, in both the mouseenter and mouseleave functions : tl.clear() .to(".activeMenu ul", 0.25, {autoAlpha:1}) .to(".activeMenu ul li", 0.25,{autoAlpha:1, ease:Power0.easeInOut}); But then the ul remains visible. Any help is much appriciated, thank you and keep up the good work!
  4. Hi, I'm using Angular UI-router to build a one-page site with a looping, draggable navigation, and want to use TimelineMax to animate a sprite on the transitions. What I've got so far (see Codepen link) is that when the user drags or swipes the target area, the animation plays or reverses (depending on swipe direction) and the new section loads. So far so good. However, I want the drag/swipe action to actually control the progress of the sprite, so that users can scrub through the timeline. Then, when they release the drag or swipe, the rest of the animation to play and the next page to load. Another thing I've noticed is that once I've swiped through all section of the page and looped back the beginning, the sprite no longer animates - the Timeline just jumps to the next sprite image. If you change direction it then starts working again. Any help greatly appreciated! NB: The individual page content won't load on the Codepen demo, not sure why, but it doesn't matter to the issue I'm trying to resolve here. Cheers.
  5. Hi, I am trying to do a simple nav that starts as a 'burger', animates to a cross and opens the menu on the right. I would then i would like it to change back to a burger and hide menu if the cross is clicked or an item in the menu is clicked. Does this involve switching between the onClick="menuIn()" and onClick="menuOut()" like they mention in this forum? http://stackoverflow.com/questions/5303899/change-onclick-action-with-a-javascript-function Am i even close? Thanks for any help, Phil
  6. I'm trying to recreate the function Scroll (Drag & FLick) from GreenSock (https://greensock.com/draggable ) on my website to make an image navigation throught a small city. It works great grabbing the image but my problem now is make the arrow navigation work as well as if I'm grabbing the image around. I'm a pretty newbie at the .js and read the documentation but couldn't make this work at all. Someone could take a look and maybe give me some lights on it? Thanks a lot
  7. I'm trying to recreate this demo in GSAP. http://tympanus.net/Development/FullscreenOverlayStyles/index9.html My codepen isn't working at all, and I'm not sure why. And yeah, I know it might be the "closed" shape, because it's 0px wide everywhere (so maybe non-existant?). I've tried it with <path id="closed" d='M500 100 L600 600 L600 0 L0 0 Z' />, and that didn't work either not sure what's up here. Maybe visibility issues?
  8. 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.
  9. I'm working on a site which will use like 7 slides in a kind of stair way. I was now trying to use Draggable for my navigation but I want to prevent the user to get lost. Since you can use type:x or type:y I thought I might get somewhere if I could change that type on the fly after Draggable.create. That doesn't seem to work. Maybe someone knows if that's possible or if I better can look for a solution based on a combination of tweens and scrollTo? To be clear an image attached of the layout. Every screen will cover the entire window.
  10. I saw this paneling demo from somebody and for an upcoming project I would like to use this. The demo I saw can be found here: http://codepen.io/grayghostvisuals/pen/enxAp I was wondering if it is possible to make an anchor navigation to each one of the panels. I tried it fast but it seems that the offset gets broken from bringing each element to a 'top: 0%;'. Is there any way to achieve this some other way? Feel free to share your thoughts or ideas.
  11. 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
  12. The basic of my problem is that I am using superscrollorama to pin timelineLite animations and when I want to jump to another part of the html page going up works fine but going back down is slowed down, (the anchor points are offset by part of the pixel animation that is bigger then the image so links don't go to the correct point on the page), by the animation being done in the timeline. I was hoping for a good way for setting timeline animation to be complete but I have been having problems of goto a specific frame and such. I originally tried to unpin all the pins and put them back in but that doesn't seem to do what I wanted. So now I am trying to complete the animation before I scroll to it so it gets by the pins at the fastest rate. I know you guys don't go deep into superscrollorama but I am just looking for how best to complete a timelite animation to it's final frame from a click event. Any ideas would be helpful.
  13. Hi There! I'm kinda new to this wonderful engine, but a veteran on AS. I'd like to know, how can I set a navigation system, so on a click it plays the timeline but stops when said so. Take a look at my code below. I have added the labels and I have a menu so when someone clicks "about" I'd like to start playing the timeline from where it is to the about point and then stop. Tried putting the tl.pause(); but it didn't work - the timeline passes through and keep playing till the end. Any help will be appreciated! var mainTL = new TimelineMax({paused:true, onUpdate:updateSlider}); var slideTL = new TimelineMax({repeat:0}); slideTL.to("#introArrow", 3, {top:140, right:30 , ease:Power3.easeOut}) ; mainTL .add("begin") .to("#introArrow", 1, {top:-100, autoAlpha:0, ease:Circ.easeIn}) .to("#diver", 2, {autoAlpha:1, scale:.2, rotation:"-180deg"}) .to("#diver", 3, {top:1300, ease:Back.easeIn}) .to("#diver", .1, {autoAlpha:0}) .to("#parachuteTop", 1, {scale:1, top:200, ease:Circ.easeOut}) .to("#parachuteTop", 1, {scale:.2, top:-179, left:-210, rotation:"0deg"}) .to("#background", 3, {top:-100, ease:Circ.easeOut},"-=3") .to("#parachuteText", 1, {top:137, left: 38, scale:.6, autoAlpha:1, ease:Back.easeIn}) .to("#zepelin", 1, {top:120, left:480, ease:Circ.easeOut}) .to(".introText", 1, {top:310, ease:Circ.easeOut},"-=.5") // Start sections / about .to("#introDive", 2, {top:-1000, ease:Power2.easeOut}) .to("#about", 2, {top:40, ease:Circ.easeOut},"-=2") .to("#background", 1, {top:-200, ease:Circ.easeOut},"-=2") .to(".I-about", 2, {top:0, left:0, ease:Circ.easeOut},"-=2") .add("about") // Services .to("#about", 2, {top:-1000, ease:Power2.easeOut}) .to("#services", 2, {top:40, ease:Circ.easeOut},"-=2") .to("#background", 1, {top:-300, ease:Circ.easeOut},"-=2") .to(".I-services", 2, {top:0, left:0, ease:Circ.easeOut},"-=2") .add("services") // Gallery .to("#services", 2, {top:-1000, ease:Power3.easeOut}) .to("#gallery", 2, {top:40, ease:Circ.easeOut},"-=2") .to("#background", 1, {top:-400, ease:Circ.easeOut},"-=2") .to(".I-gallery", 2, {top:0, left:0, ease:Circ.easeOut},"-=2") .add("gallery") // Contact .to("#gallery", 2, {top:-1000, ease:Power2.easeOut}) .to("#contact", 2, {top:40, ease:Circ.easeOut},"-=2") .to("#background", 1, {top:-500, ease:Circ.easeOut},"-=2") .to(".I-contact", 2, {top:0, left:0, ease:Circ.easeOut},"-=2") .to("#secondblock", 2, {top:420, ease:Circ.easeOut},"-=2") .add("contact") ;
  14. Hi there I have a nav that links to slides with tweens in between. The slideshow navigation works fine by loading each slide according to it's position on the list. See the following pen http://codepen.io/mulegoat/pen/ruHhD The problem I'm having is trying to link to a certain slide from within each slide. Using the following code works on all but one "Link to page 2" link - in this case, the link within the first slide - but on my localhost its slide 5 where the link fails. I know this is more of a jquery issue but though I'd put it up here incase somebody had a better way of doing this with getElementById or something else. Many thanks for any help function initActionPlan() { $(".actionPlanLink").each(function(index, element) { $(this).on("click", gotoActionSection); }); } function gotoActionSection(e) { if(currentSectionNum != $(e.currentTarget).index()){ if(currentSection) { TweenLite.to(currentSection, 0.5, {autoAlpha:0}); } currentSection = $(".tabsContainer")[1]; TweenLite.to(currentSection, 0.2, {autoAlpha:1}); } } //OpenClose Action Plan function actionInit(){ initActionPlan(); $(".actionPlanLink")[1].click(); } actionInit();
  15. 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?
  16. Hi! I´m wondering if the Super scrollorama has some kind of vertical navigation like this one: http://www.evanshalshaw.com/bondcars/index.html I´m trying to figure out some kind of vertical menu, where you´re able to click on one item, and it takes you to the right portion of animation. Is it possible? How? Thanks a lot!