Jump to content
Search Community

Solbeg

Business

  • Posts

    13

  • Joined

  • Last visited

 Content Type 

Posts posted by Solbeg

    Timeline & ScrollTrigger after page reload on the mid of the page

    in GSAP

    Posted

    I've added anchors to each section with text

    Everything works fine when I just load a page, but if I need to jump the anchor, everything crashes

    It works almost correct, but scrrollTrigger doesnt work correctly after anchors page reload (wach attached video)

    it seems to me that it does not update the position of all elements after the page has been loaded

     

     

     

    See the Pen jOeMyPw by AnnaShubskaya (@AnnaShubskaya) on CodePen

    ScrollTrigger Animation with inner sync animations

    in GSAP

    Posted

    @Rodrigo

    I've added anchors to each section with text

    is it possible to navigate to the correct section when you click on an anchor from another page?

    I've changed the code slightly, but I'm not quite sure how to affect timeline 

    const images = gsap.utils.toArray(services.querySelectorAll('.media-wrap'));
const texts = gsap.utils.toArray(services.querySelectorAll('.text-wrap'));
if(images.length > 1 && texts.length > 1 ) {
          const heights = []
    
          texts.forEach((text, i) => {
            gsap.set(texts[i + 1], { y: `${texts[i].scrollHeight}`});
            heights.push(text.scrollHeight)
          })
          const heightSum = heights.reduce(
            (accumulator, currentValue) => accumulator + currentValue
          );
      
          function fadeImage(index) {
            if (tl.scrollTrigger.direction > 0) {
              gsap.to(images[index], { opacity: 0 });
              if (images[index + 1]) {
                gsap.to(images[index + 1], { opacity: 1 });
              }
            } else {
              gsap.to(images[index], { opacity: 1 });
              if (images[index + 1]) {
                gsap.to(images[index + 1], { opacity: 0 });
              }
            }
          }
      
          let tl = gsap.timeline({
            defaults: {
              ease: "none"
            },
            scrollTrigger: {
              trigger: ".animation-wrap",
              scrub: true,
              pin: true,
              start: () => "top top",
              end: () => "+=" + heightSum
              //end: () => "+=" + texts.length * 200 + "%"
            }
          });

          function scrollToHash(hash, e) {
            const elem = hash ? document.querySelector(hash) : false;
            if (elem) {
              if (e) e.preventDefault();
              //ScrollSmoother.get().scrollTo(elem, true);
              gsap.to(window, {
                duration: 1,
                scrollTo: elem,
                ease: "Power1.easeInOut"
              });
            }
          }

          document.querySelectorAll("a[href^='#']").forEach((a) => {
            a.addEventListener("click", (e) => {
              e.preventDefault();
              scrollToHash(a.hash);
              window.history.pushState({}, "", a.hash);
            });
          });

          window.addEventListener("load", refreshScroll);

          function refreshScroll() {
            document.querySelector("#smooth-content").scrollTop = 0;
            window.scrollTo(100, 100);
            ScrollTrigger.refresh();
            console.log("refresh", window.location.hash);
            // Scroll to the element in the URL's hash on load
            scrollToHash(window.location.hash);
          }

          scrollToHash(window.location.hash);

          texts.forEach((text, i) => {
            console.log('all:', text)
            if (i && i !== texts.length - 1) {
              console.log('not first:', text)
              tl.to(text, { y: 0 }, "<")
                .to(text, {}) // conditionally scroll here
                //.to(text, { yPercent: -100 })
                .to(text, { y: `-${text.scrollHeight}` })
                .call(fadeImage, [i], "<");
            } else if (i === 0 ){
              console.log('first:', text)
              tl.to(text, {}) // conditionally scroll here
                .to(text, { y: `-${text.scrollHeight}` })
                .call(fadeImage, [i], "<");
            } else {
              tl.to(text, { y: 0 }, "<")// conditionally scroll here
            }
          });
      
          const parent = services.querySelector('.element.left');
          texts.forEach((text, i) => {
            if(text.contains(images[i])) {
              const movedImages = text.querySelector('.media-wrap')
              parent.append(movedImages)
            }
          })
        }

     

    Have an error when I'm trying to relogin

    in GSAP

    Posted

    I have an error when I'm trying to relogin my greensock member accoun via token

    I do 2 commands 

    $ npm config set @gsap:registry https://npm.greensock.com/
$ npm config set //npm.greensock.com/:_authToken <your-auth-token>

    And than I have an error when i do command 

    npm install @gsap/business

    image.png.a1358fe724ad07f89f4dccd284da887b.png

×
×
  • Create New...