Jump to content
GreenSock

sscash

Members
  • Posts

    6
  • Joined

  • Last visited

Everything posted by sscash

  1. Thanks for the swift response. I check the docs and guide and i think it's what i needed.
  2. Someone kindly assist to convert this CSS code to GSAP. .Banner__image.fade-in { transform: translate3d(0px, 0px, 0px) scale3d(1.25, 1.25, 1) rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg ) skew( 0deg , 0deg ); transform-style: preserve-3d; filter: blur(5px); transition-duration: 0.9s; } ///// .Banner__image.fade-in.appear { transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg ) skew( 0deg , 0deg ); transform-style: preserve-3d; filter: blur(0px); will-change: filter, transform; } I kindly need it to be output this way, the example is for fadeInUp. tl.set(".banner-image", { y: 100, opacity: 0 }); /// tl.to(".banner-image", { ease: "Expo.easeOut", duration: 1.25, y: 0, opacity: 1, stagger: .05, delay: 0 },"-=1"); Thanks for your time.
  3. Hello Devs, Please someone to kindly help edit this fade in and out code, to slide up and down or swipe left or right page transitions with Gsap + Barba js here's my code. // Animation - Transition function pageTransition() { var tl = gsap.timeline(); tl.to(".main-fade", { duration: .4, ease: "Power0.easeNone", opacity: "0" }); tl.set(".main-fade", { y: 0, opacity: "1" }); tl.set(".loading-screen", { opacity: 0 }); } thanks
  4. Thanks for the swift and detailed response. I was thinking its related to GSAP, is there any plugin or function from GSAP that have such functionality?
  5. I was searching on Google and your forum to solve this issue, but nothing. I had to write you brilliant minds here. 1. This your demo https://codepen.io/GreenSock/pen/mdVyPvK 2. I just need it to work with scroll content. "Scroller" This is the code to make the site have that smooth and disappearing scroll bar. gsap.registerPlugin(ScrollTrigger); let bodyScrollBar = Scrollbar.init(document.body, { damping: 0.1, delegateTo: document, }); ScrollTrigger.scrollerProxy(".scroller", { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; }, }); bodyScrollBar.addListener(ScrollTrigger.update); But I can't have both 1 https://codepen.io/GreenSock/pen/mdVyPvK 2. Scroller works together. Any solution will be highly appreciated.
×