Search the Community

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

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, 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/