Search the Community

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.

Hi all, we recently did a project with a scroll trigger that creates an endless scroll behaviour. See attached codepen for the markup. Therefore, we need the callbacks of onLeave and onLeaveBack to trigger immediately, also while scrolling: as soon as its marker is hit, the scroll position is updated to either top or bottom 0 values. It works fine on all desktop browsers but not in Safari. It kinda "waits" until the scroll is finished and only then navigates. This means the scrolling stops for a sec, updates the values and then the user has to start scrolling again. Ideally, this should be one fluid motion. Did anyone ever encounter this issue and knows some way to fix this? We think it might be Safari's easing of the scroll that interferes. I'm not sure if you guys can see this in the CodePen example cuz this seems to work just fine. We think this is due to the fact that the interface does not change when scrolling is happening, e.g browser bar moves in and out. So here is the production website https://dev.mensingtimofticiuc.com as well. Thankful for any hints or tipps and thanks in advance!

Hi, I'm struggling with controlling animation in Vue 3. At the beginning everything is ok and I can freely control animation as usual. The problem starts when the animation completes. The behaviour of the controls is very odd. Sometimes it jumps to some specific time that I could not figure out why. Restarting, playing, disposing and creating a new tween from scratch does not solve the issue either. Could it be an issue with Vue reactivity that doesn't update DOM? I've made a minimal Vue component example with GSAP methods hooked into buttons for control. EDIT: Just found out that it works properly with `.to()`, it's the `.fromTo()` that has this issue EDIT 2: Looks like Vue doesn't render the animation after complete and only renders one "frame" from state at the time the button is clicked. Clicking "restart" after completion plays the animation in GSAP's internal state but doesn't render it until it gets paused and then resumed. Once resumed, only one frame is rendered

Sup guys, First time developing a Vue.Js application and wanted to animate my #about section on scroll from the left side of the screen to the right side. I split my app into two parts: the welcome section wrapper that holds the elements I want to animate and the app that scrolls normal again. When the user starts scrolling stage-1 is applied to the master and the animation takes place: <div id="master" class="stage-0 h-100 w-100 position-relative isAnimating"> <div class="welcome-section-wrapper w-100 position-relative"> <div class="welcome-section-animated d-inline-flex w-100 h-100" > <Hero /> <About /> </div> </div> <div id="app" class="app"> <Experience /> </div> </div> When I start scrolling now it animates the section correct and disables scrolling for 3 seconds. I donßt know if this approach is right + I can´t go the way back when I want scroll up again. My first attempt was to detect when the user started to scroll and then add some classes to the sections to transform: handleScroll() { const navBar = document.querySelector(".navbar"); const master = document.querySelector("#master"); master.classList.add("stage-1"); master.classList.remove("stage-0"); var anim = gsap.timeline({ paused: false, }); anim.from("#master.stage-0", 0, { transform: "translateX(0)", }); anim.from("#master.stage-0 #about", 0, { transform: "translateX(-100vw)", }); anim.to("#master.stage-1 #hero", 0.25, { transform: "translateX(105vw)", }); anim.to("#master.stage-1 #about-content", 0.5, { opacity: 1, }); anim.to("#master.stage-1 #about", 3, { transform: "translateX(0)", onComplete: () => document.querySelector("#master").classList.remove("isLoading"), }); navBar.classList.add("bg-nav"); if (window.scrollY < 10) { navBar.classList.remove("bg-nav"); master.classList.remove("stage-1"); master.classList.add("stage-0"); } } and the corresponding transformations to animate the sections ( I excluded the transitions because they are just cubic bezier´s) /** *stage 0 */ #master.stage-0 { transform: translateX(0); } #master.stage-0 #about { transform: translateX(-100vw); } /** *stage 1 */ #master.stage-1 #hero { transform: translateX(105vw); } #master.stage-1 #about { transform: translateX(0); } #master.stage-1 #about-content { opacity: 1; } #master.isAnimating .app { display: none; } At this point I don´t really know how to setup the timeline. Any suggestions are highly appreciated! Thanks

Hi guys ! I made a sample using the latest GSAP 3.1.1 and Vue.js 2.6.11, I must admit I haven't done any web in years and I was wondering why it displays correctly on the browser while effect on the divs' background is quite different. I know it's probably quite a lame question, probably related to some CSS properties not being supported on mobile, but I couldn't figure out which one(s) by looking at Chrome developer console and thought that you guys might surely know at first sight. Any hint would be very much appreciated 😊

Hey there! Is there a possibility to not animate an element when it is set on display none by CSS? My current project is based on Vue.js. So I don't have that window object on mounted to detect the viewport size. So I thought it might be a nice workaround to let the animation start only if the target element is set on display block. Or is the only solution another Vue plugin to get the viewport width? Thanks in advance Kerstin

Hi, I'm using in components navigation guards with vue router to manage transitions between vues but can't get the onComplete firing the "next" argument: beforeRouteLeave(to, from, next) { const self = this const { Im } = self.$refs const tl = new self.TimelineLite tl.to(Im, .4, { y: -40, opacity: 0, onComplete: next }) } So I ended up with this kind of hacky solution: beforeRouteLeave(to, from, next) { const self = this const { Im } = self.$refs const tl = new self.TimelineLite tl.to(Im, .4, { y: -40, opacity: 0, // onComplete: next }) setTimeout(function(){ next() }, 400) }, Any ideas about how I could actually trigger the "next()" argument with the onComplete callback? Thks.

Hi, I'm using TweenMax inside a Vue.js SFC - https://vuejs.org/v2/guide/single-file-components.html It's a Spinner component I re-use throughout our app. As soon as I visit a page using vuejs router - https://router.vuejs.org/ that has a spinner component in it and then go to another page, on return to the previous page, the animation no longer works and I get tons of errors that increment really fast in the console. It may be related to this if vue.js is hiding it for reuse - I'm not sure if I should be troubleshooting in this forum or vue.js Thanks, Gavin.

I try to copy this website to study and I found that my fonts are not smoothly. I would like to gain your suggestion how to make website like this. Thank you, Kopkap. http://www.carlsberg.com/170/