Jump to content
Search Community

Search the Community

Showing results for tags 'navigation'.

  • 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

  • Learning Center
  • Blog

Categories

  • Products
  • Plugins

Categories

  • Examples
  • Showcase

Categories

  • FAQ

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. Hello everyone, I've tried to fix the navigation bar, but it works not fine; what should I change to make it visible when the first section is in the viewport more than 90% and unfix it when the last section is strolled more than 10% down? It should refresh when we get back to the container. Here is my code for this: const tlfour = gsap.timeline({ scrollTrigger: { trigger: ".carousel-inner", start: "top-=100px", end: "0", marker: true, toggleActions: "play none none reverse", endTrigger: panels[panels.length - 1] } }); tlfour.to(".carousel-navigation", { position: "sticky", bottom: 100 });
  2. Hello, I'm having some trouble navigating the pinned cards block. In the menu on the left there are anchor links that, when clicked, should scroll to their block. Also, during normal scrolling, links should be marked with an active class when the block becomes visible. Now, when clicked, the link scrolls to the top of the parent block, as far as I understand, because the cards are on top of each other. What is the problem? How can I pin the scroll to the desired block? I used these URLs to implement cards on top of each other and for navigation: https://greensock.com/forums/topic/33597-stacking-cards-overlap/ And https://gsap.com/community/forums/topic/35776-click-to-navigate-to-a-section-using-gsap/ https://codepen.io/Vlanesvit/pen/gOExGzZ
  3. Hi I built a dropdown navigation menu with gsap you can see a live example here https://sample.blinkpayment.co.uk/blink-learning-podcasts/blink-payment-insights-the-impact-of-contactless-payments-on-businesses Sometimes bugs can be created either randomly or by rapidly hovering over multiple dropdowns in quick succession. What are some ways I could make this code more reliable and better manage state for all of my animations. My codebase is vanilla with typescript. Live example https://sample.blinkpayment.co.uk/blink-learning-podcasts/blink-payment-insights-the-impact-of-contactless-payments-on-businesses Gist example of gsap menu code https://gist.github.com/samducker/3a1debb3a5816addddf76d3e6341927b Video of issues https://share.cleanshot.com/GJb8CW52
  4. Hello, I'm pretty new at this and this is my first post so I'll try to be as clear as possible but bare with me please. The codepen attached is essentially what I want to do for this site in terms of functionality. I'm struggling with the menu portion because it is a horizontal website and I can't just add the ids to the href. I tried using scrollTo but I haven't had any luck so I'm wondering if someone can help me. The idea is to have the menu flow throughout all the sections in a sticky-like position. When you click on one of the menu links it sends you to the corresponding section regardless of where you are on the website. Right now I'm thinking scrollTo but I'm open to other methods/animations as long as it takes you to the particular sections which is what I can't figure out. I'd appreciate any help. Thanks!
  5. I feel like I may be overthinking this... ? I have multiple sections on a page, each with their own timeline, all of which are attached to the scrollbar via ScrollTrigger. The trigger for each section is the ID of the section's container, and the timelines start at the top of each container. I'm trying to set up a fixed navigation with anchor links for the user to navigate between these sections. The problem I'm running into is that when you click on a nav link, it scrolls the user to top of the container, which is the start of the timeline. Since the timeline is attached to the scroll bar, the user will then have to scroll to play out the rest of the timeline (which I feel is not always intuitive enough). Is there a way to link to the end of the timeline of a section? I tried putting a hidden element at the end of each section for the anchor link to link to... but that doesn't always play out the whole animation. I also thought about making separate timelines (but I feel like that's too much work for something that probably has an easier solution). Am I missing something?
  6. Hi, i am just getting to know gsap and i have a little problem :/. I am writting a page in gatsby and made a mobile side menu with gsap but i noticed that when the menu is opened for the first time and closed, after resizing the window, the menu doesn't change its position on the x-axis and starts sticking out. const Header = () => { const [isOpen, setIsOpen] = useState(false) const menuRef = useRef(null) const menuBtn = useRef(null) const tl = useRef() const toggleOpen = () => { setIsOpen(!isOpen) } useEffect(() => { const nav = menuRef.current const mainMenuLists = [...nav.querySelectorAll("ul:nth-of-type(1) li")] const socialLists = [...nav.querySelectorAll("ul:nth-of-type(2) li")] const btn = menuBtn.current const upLine = btn.querySelector("span:nth-of-type(1)") const centerLine = btn.querySelector("span:nth-of-type(2)") const downLine = btn.querySelector("span:nth-of-type(3)") tl.current = gsap .timeline() .to([upLine, downLine], { y: "-50%", duration: 0.3 }) .to(upLine, { duration: 0.1, rotation: 45 }, 0.2) .to(downLine, { duration: 0.1, rotation: -45 }, 0.2) .to(centerLine, { duration: 0.1, autoAlpha: 0 }, 0.2) .to(nav, { x: "0", duration: 0.5, autoAlpha: 1 }) .staggerFromTo( mainMenuLists, 1, { x: "-=15px", autoAlpha: 0 }, { x: "0", autoAlpha: 1 }, 0.2 ) .staggerFromTo( socialLists, 0.5, { y: "+=3px", autoAlpha: 0 }, { y: "0", autoAlpha: 1 }, 0.1 ) .reverse() }, []) useEffect(() => { tl.current.reversed(!isOpen) }, [isOpen]) return ( <HeaderComponent> <Logo> <AniLink path="/" hex="#333"> <LogoImg /> </AniLink> </Logo> <OpenMenuBtn ref={menuBtn} onClick={toggleOpen}> <span /> <span /> <span /> </OpenMenuBtn> <Nav menuRef={menuRef} setIsOpen={setIsOpen} /> </HeaderComponent> ) } const Nav = styled.nav` position: fixed; top: 0; left: 0; bottom: 0; right: 0; transform: translateX(100%); background-color: #ccc; z-index: 99; ` const Navigation = ({ setIsOpen, menuRef}) => { return ( <Nav ref={menuRef} onClick={() => setIsOpen(false)}> ... </Nav> ) } I think i know what the problem is. Timeline is created when the component is mounted and the first time the menu is opened it pops up getting translate (0). When I close the menu, the animation returns back and gsap assigns to the translate (x), value from the start of the animation. because the animation is set to reverse (I know it's obvious) . I wonder if there is any possibility to change the value of position x only when the animation returns?(Because I can't/ i don't know how do this animation differently: D) https://ibb.co/f8Y0Tg5 short demo
  7. Hi! How can i use links (like navigation) to play/reverse tween and scroll to trigger position, tween must be played/reversed with scrolltrigger or on click button I think something like window.scrollTo(trigger-start/end position) but I can't figure out how to calculate the position of triggers Thank you!
  8. 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!
  9. 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
  10. 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?
  11. 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!
  12. 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.
  13. 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
  14. 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
  15. 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?
  16. 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.
  17. 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.
  18. 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.
  19. 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
  20. 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.
  21. 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") ;
  22. 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();
  23. 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?
  24. 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!
×
×
  • Create New...