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.

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