Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'modal'.

  • 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

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 3 results

  1. 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.
  2. 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
  3. 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.
×