Jump to content
GreenSock

CAT is CAT

Members
  • Posts

    3
  • Joined

  • Last visited

CAT is CAT's Achievements

0

Reputation

  1. I also would need to change the cursor style to cursor:progress during the black transition but it wont work (newbie), there is an easy solution for that?
  2. Thanks @ZachSaucier, fantastic. Could you show what I should change in this snippet and also how to not mixing ease formatting? function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } function pageTransition() { var tl = gsap.timeline(); tl.to(".loading-screen", { duration: 1, width: "100%", left: "0%", ease: "Expo.easeInOut", }); tl.to("#svg-1", { duration: 1, opacity: 0, y: 30, stagger: 0.4, delay: 0.2, }); tl.to(".loading-screen", { duration: 1, width: "100%", left: "100%", ease: "Expo.easeInOut", delay: 0.3, }); tl.set(".loading-screen", { left: "-100%", }); tl.set("#svg-1", { opacity: 1, y: 0 }); } function contentAnimation() { var tl = gsap.timeline(); tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 }); } $(function () { barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); pageTransition(); await delay(2000); done(); }, async enter(data) { contentAnimation(); }, async once(data) { contentAnimation(); }, }, ], }); }); Would be very helpful
  3. Hi, I'm new to Gsap & I'm working on page transitions. The idea is to have a transition from the about page and the home page with a centered logo animation, very simple. I click on my button, the transition come in, the logo scale from 0 to 1 and go down fading, great! The first animation work fine but when I clicked again the scale factor is now missing unfortunately... How can i fix this? HERE my codepen: https://codepen.io/cat999/project/editor/AEeEdg
×