Search the Community
Showing results for tags 'modal'.
Found 10 results
-
Hello, I'm trying to display a modal that scrolls horizontally when loaded. I took my inspiration from this pen : https://codepen.io/GreenSock/pen/wvxoGeG It works perfectly when ScrollSmoother is not involved, but as soon as I uncomment the lines (5 to 11) that enable ScrollSmoother, it doesn't work anymore and I don't have a clue about the reason why. It seems that my ScrollTrigger is now related to the ScrollSmoother instance and I don't want that. Is there a method to detach my ScrollTrigger instance from the ScrollSmoother one? Any guidance is much appreciated.
-
Hello, I was using parallax in my project but I am using code to turn this feature off for mobile devices. However, when I did this, the parallax visuals became normal as I wanted. But I can't pause body scroll with scrollsmoother in this way. For example, when I open the menu, the page scroll works. I have such a problem, how can I solve it? I share my project link with you; Example https://yeni.dybank.com.tr/ If you try this link on mobile, you will understand more easily what I mean. Thank you so much.
-
Hello, I'm using modal or popup in my project, but when I scroll, the modal and popup are not right there on the page. Can you help me?
-
GS Community, I am in the process of rebuilding a GSAP website into a Vue.js project. I am in the very early stages of learning Vue, here is a good, free, video series and here is a very good (but it cost 10 dollars) Udemy course. My hope for this thread is to build out a full GSAP & Vue App. I will break out each component as I go and place it in a codepen (I have quite a few things done already, it will take me some time to go back and break things out). This will be a work in progress and the codepens will be updated in phases: Phase 1: will be to get just get things wired the Vue way. Phase 2: will be to use GSAP for the animations and transitions etc. Phase 3: Build everything as dynamic/reusable components. If all goes well this will turn into a Vue/GSAP component library of sorts for everyone to reference. Blake, one of the GreenSock Moderators, has graciously offered to help guide me (Thank you Blake). Goals for the thread/project: Navigation Button Component Section Content Component Section Hero Image Component Section Thumbnail/Modal Button Component Modal Component Password Modal Component Vertical Slideshow Component (I will also to help others build out a Horizontal Version). Slide-up Tab Component Radial Button/Checkbox Form Filtering based on a sector/classname (with persistence via local storage or a Vue method, if it exists - learning as I go ) All of the above is built in a non-Vue way here http://hainis.net/dev/ Note: that only the print/advil, print/amex, print/bayer slideshow content is sorted, all the other thumbnails will load a blank modal. This site has performance issues and at times the javascript, loaded via a Djax call, for the thumbnail buttons to launch the slideshow content is not binding properly. These issues and some prodding by Blake have made me venture down the Vue.js path. Side note: I'm learning, not there yet, to do things a DRY way; hopefully under Blake's guidance I will finally get this under control and tighten up the spaghetti code that I currently have. Okay, so that's the setup. Next post will be some useful links and a current state/NOT simplified codepen of the current Vue app.
- 21 replies
-
- 1
-
-
- vue
- components
- (and 8 more)
-
Hello, I'm using companets like this in my project, but the page can be scrolled up and down. I definitely want to lock the scroll, I just want it to return to normal when I turn it off. Can you help?
-
Hello, I have a problem but I can't seem to find an answer. I have this custom modal that has a Fixed position but it's scrollable since there is a lot of content. I need to animate something inside the modal so I create my scrolltrigger when I open the moda, but the trigger doesn't seem to work. Even if I scroll the trigger line never moves. I left an example as a codepen also I left an image of my site, on the image the start never moves to the scroll-start line of the trigger never move. I try using the scroller property but it's not working either. Any solutions I could try??
-
Hey ya'll, New to gsap and draggable, trying to mimic a "Pull Down to Dismiss" effect like you will commonly see in native mobile apps. I am sure I am doing to something wrong and could really use some guidance. I have to set my animation duration unrealistically high to accomplish the effect which makes using the then promise from gsap.to - overall where I am at feels hacky, but I can't seem to find a good path in docs. Below is an example of what I am hoping to achieve on all popular mobile browsers: Pen:
-
Hi, I'm looking for help regarding scroll trigger and items positioned fixed within a pinned section. I'm having an issue where I have a modal that needs to stay in window view once it's open, but it looks like it's being positioned relative to its pinned parent and I'm able to continue scrolling as normal. Hoping someone would be able to help me out!
-
Howdy, I've just recently started learning and playing with GSAP. Anyone able to guide me in the right direction to fix up the attached Pen? Specifically, I'm having trouble: Reversing only the active / open modal's timeline (or, eventually I'll have a dedicated timeline for the closing animation, if that's easier) This is off topic I'm guessing but I'm also attempting to stick the non active modal in place on the page. The goal is when a modal is active, the inactive "inline" modals don't shift positioning. I understand I could do this by using standalone buttons which launch hidden content but I'm hoping to get more of a card-to-modal than a button > launch modal effect. Cheers, -- mp
-
Ok I am using bootstrap 3, and the modal feature for my portfolio. I have it set up fine and everything works, but when I add my smooth scrolling javascript the mouse wheels scrolls in the background when you have the modal opened. I used this tutorial. Which helped me get smooth scrolling working with TweenMax and ScrollToPlugin. Here is my js for the smooth scrolling: $(function(){ var $window = $(window); var scrollTime = 1.2; var scrollDistance = 170; $window.on("mousewheel DOMMouseScroll", function(event){ event.preventDefault(); var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3; var scrollTop = $window.scrollTop(); var finalScroll = scrollTop - parseInt(delta*scrollDistance); TweenMax.to($window, scrollTime, { scrollTo : { y: finalScroll, autoKill:true }, ease: Power1.easeOut, overwrite: 5 }); }); }); You can see my site without the above javascript here: Correct modal scrolling With the above javascript: Error modal scrolling jsfiddle, for some reason the remote content does not display in the modal (on localhost as well) so you cant see it scroll, but you can play with the js here. I attempted to make a jsfiddle but the way I am displaying the contents in the modal doesn't work in jsfiddle for some reason (this was mentioned after I did some research) anyway just scroll to the 3rd section (portfolio) and click an image to see what I am talking about. My modal code is just the stock bootstrap moal and I also tried this with bootbox.js and the same issue happened, so I don't think that is the issue. I have been trying to figure this out for a week now with no success if someone could take a look would be greatly appreciated.
