Jump to content
Search Community

Search the Community

Showing results for tags 'vuejs transition'.

  • 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
  • Supercharge

Categories

  • Blog

Categories

  • Products
  • Plugins

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


X


CodePen


Company Website


other


Location


Interests

Found 3 results

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