
sscash
-
Posts
8 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Posts posted by sscash
-
-
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?
-
6 hours ago, Cassie said:
This may help - taken from the getting started guide
GSAP CSS x: 100 transform: translateX(100px) y: 100 transform: translateY(100px) rotation: 360 transform: rotate(360deg) rotationX: 360 transform: rotateX(360deg) rotationY: 360 transform: rotateY(360deg) skewX: 45 transform: skewX(45deg) skewY: 45 transform: skewY(45deg) scale: 2 transform: scale(2, 2) scaleX: 2 transform: scaleX(2) scaleY: 2 transform: scaleY(2) xPercent: -50 transform: translateX(-50%) yPercent: -50 transform: translateY(-50%) GSAP can animate any
transform
value but we strongly recommend using the shortcuts above because they're faster and more accurate (GSAP can skip parsing computed matrix values which are inherently ambiguous for rotational values beyond 180 degrees). The other major convenience GSAP affords is independent control of each component while delivering a consistent order-of-operation.thanks helpful.
-
1
-
-
9 hours ago, GreenSock said:
Hi @sscash. I don't really understand what you're asking here - can you please provide a minimal demo, perhaps in CodePen? It looks like you only included a tiny portion of the code(?). It always helps to see things in context.
GSAP can animate pretty much any CSS property. Perhaps it would help if you read the getting started guide or the docs? I'd recommend taking a shot at coding it and then if you run into trouble, share your minimal demo and we'd be happy to take a peek and answer any GSAP-specific questions.
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.
See the Pen mdVyPvK by GreenSock (@GreenSock) on CodePen
Dynamic change Nav color with GSAP
in GSAP
Posted
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.