Jump to content
GreenSock

sscash

Members
  • Posts

    7
  • Joined

  • Last visited

Posts posted by sscash

  1. 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?

  2. 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.

    • Like 1
  3. 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.

  4. 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.

     

  5. 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

  6. 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

×