Jump to content
GreenSock

Amini

Members
  • Posts

    18
  • Joined

  • Last visited

Posts posted by Amini

  1. Hi, I'm using gsap with vue & vue-router. The problem is when the page loads the first time, it works correctly with no trouble, but whenever I switch to another page using vue-router and go back, all of the animations used along with scrollTrigger is messing up. I tried these settings but weren't helpful. I'm seeking for a solution where I can fix the messing up problem. Maybe there is a way where I can kill and refresh the scrollTrigger as below but my solutions didn't work.


     

    data() {
    	return {
        	t: null
        }
    },
    
    methods: {
    	scroll() {
        	this.t = gsap.to('.foo', {
            	x: 100,
              	scrollTrigger: '.bar'
            })
        }
    },
      
    mounted() {
    	this.scroll();
      	// Nuxt plugins used here
      	this.$ScrollTrigger.refresh();
    },
    
    beforeDestroy() {
    	this.t.kill();
      	// tried this: this.t.kill(null);
    }

     

  2. Hi, I tried to use a timeline with scrollTrigger and it worked well. 

     

    const sections = gsap.utils.toArray('.item2');
    
    gsap.timeline({
    	scrollTrigger: {
        	trigger: '.wrapper',
          	start: 'center center',
          	pin: true,
          	srub: 1
        }
    })
    .to('.item1', {
    	top: 50
    })
    .to(sections, {
    	x: 50
    })

     

    The problem is that there is four items in *sections* which will cause a fast scroll speed on them and makes it look awkward because of the *scrub 1* and I wanted to use *scrub 4* on them. So I changed the code to this.

     

    gsap.timeline()
    .to('.item1', {
    	top: 50,
      	scrollTrigger: {
        	trigger: '.wrapper',
          	scrub: 1,
          	pin: true,
         	start: 'center center'
        }
    })
    .to(sections, {
    	x: 50,
      	scrollTrigger: {
        	trigger: '.wrapper',
          	// I want to use a custom scrub here
          	scrub: 4,
          	pin: true,
          	start: 'center center'
        }
    })

    But then another problem occurred which caused the timeline not to be working properly.

    How do I set a custom scrub on an element without blowing the timeline?

    See the Pen Barjjjy by amini-py (@amini-py) on CodePen

  3. Hi, I've created scrollTrigger which will be applied on the titles as you can see. The lottie files interactivity working well before reaching the trigger, but it wouldn't play anymore after the scrollTrigger is applied on the trigger `.wrapper`. My purpose is to animate the lottie files the same as the wrapper-child get animated.

    See the Pen mdxedYN by amini-py (@amini-py) on CodePen

  4. Hi, recently I asked a question about scrollTriger. We were able to successfully apply it on the page. There is one small issue that whenever the scroll finishes, a white background flashes immediately and goes away. I don't understand what can be the reason. I'm providing the code which will help you. I'm not able to deploy website for now, but I may in few hours or may not. The link for my previous related question. Btw, I'm using vue2.
     

    <section class="about-story relative pb-[100px] xl:pb-[300px] mb-[80px] xl:mb-[120px]">
      <gallery />
    </section>
    
    // Inside gallery.vue
    <div class="story-gallery">
      <div class="gallery flex flex-nowrap wrapper">
          <div v-for="(img, index) in gallery" :key="index" :class="img.class" class="flex-shrink-0 child-wrap">
              <img :src="`/aboutUs/${img.src}.png`" :alt="img.alt" />
          </div>
      </div>
    </div>

     

    gsap.registerPlugin(ScrollTrigger);
    const sections = gsap.utils.toArray(".child-wrap");
    let maxWidth = 0;
    const getMaxWidth = () => {
      maxWidth = 0;
      sections.forEach((section) => {
        maxWidth += section.offsetWidth;
      });
    };
    getMaxWidth();
    ScrollTrigger.addEventListener("refreshInit", getMaxWidth);
    gsap.to(sections, {
      x: () => `-${maxWidth - window.innerWidth}`,
      ease: "none",
      scrollTrigger: {
        trigger: ".wrapper",
        pin: true,
        scrub: true,
        end: () => `+=${maxWidth}`,
        invalidateOnRefresh: true
      }
    });
    sections.forEach((sct, i) => {
      ScrollTrigger.create({
        trigger: sct,
        start: () => 'top top-=' + (sct.offsetLeft - window.innerWidth / 2) * (maxWidth / (maxWidth - window.innerWidth)),
        end: () => '+=' + sct.offsetWidth * (maxWidth / (maxWidth - window.innerWidth)),
      });
    });

     

  5. We're planning on using ScrollTriger in gsap to apply transform in our website. We have some cards which are being transformed. We want these cards to be scrolled to the end horizontally and after the scroll is finished (the last card shows up), so the page scroll moves to the next section and vice versa. We couldn't find a useful resource to apply this and no one knows gsap here. You can find a better example on this website at the bottom of the page which the class name for the cards is .item-extension.

    While you're reviewing this question, we will be seeking the answer. Thanks in advance

    Screenshot 2022-06-27 110927.png

×