sscash

Hello devs, is it possible to dynamically change nav color.. 1. When the fixed Nav is on Dark background the Nav color is White 2. When the fixed Nav is on Light background the Nav is Dark. Thanks for your time.

Im trying to use the scroll Trigger to animate text but anytime i use the start: 0% 100%; // the text jumps over start: 0% 110%; // the text scrolls passed, exactly as i wanted. My code example if (document.querySelector(".span-line")) { $(".span-line .span-line-inner").each(function (index) { let triggerElement = $(this); let targetElement = $(this); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, toggleActions: "play none none reset", start: "0% 100%", end: "100% 0%", markers: true, }, }); if (targetElement) { tl.from(targetElement, { y: "100%", stagger: 0.01, ease: "power3.out", duration: 1, delay: 0, }); } }); } Please watch the video to understand better. This is when am using the 100% and the text jumps This is when i use the start:110% and the text stays put and looks professional any advise or fixes?

thanks helpful.

Thanks for the swift response. I check the docs and guide and i think it's what i needed.

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.

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

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?

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.