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

I have created a product list page where every thumb image will have a zoom effect. the zoom effect code is working fine in the pure javascript. but my project is in vuejs and I wanna achieve same effect in my vue component. I already made my component and put some code in vuejs way. but it's not working right way. when I clicked it jumps to top left and then zooming. Here is my sandbox link in vuejs. Maybe I am missing something or there is have a better way to write this pure javascript code to vuejs way. it would be appreciated if any expert takes a look and give me the solution. The zoom effect goal is this. I believe i am very close to this effect. just can't figure out the problem. Thanks in advance.

Hello Greensock community. I adapted this example [http://vuejs.org/examples/modal.html] from vue.js to use greensock to find out what was involved. I hope this example is helpful to others out there. Suggestions or thoughts welcome. Erik