Jump to content
Search Community

Amini

Members

  • Posts

    20

  • Joined

  • Last visited

 Content Type 

Posts posted by Amini

    Scroll Snap with smooth-scrollbar js

    in GSAP

    Posted

    Hi, I'm trying to make a scroll snap using gsap. I've already proxied the smooth-scrollbar to the scrollTrigger but this is not solving my issue. So the scrollSnap is not working properly (working but having issues) and since you know the smooth-scrollbar scrolls the page using transform and not with overflow. (Uncomment the part and you'll see it explodes)
    Thanks in advance. 

    See the Pen yLEGNYN?editors=0010 by amini-py (@amini-py) on CodePen

    ScrollTriggers messes up after every vue-router page changes

    in GSAP

    Posted

    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);
}

     

    Using scrollTrigger timeline but I should use custom options

    in GSAP

    Posted

    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

    Using Lottie files with scrollTrigger

    in GSAP

    Posted

    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

    ScrollTrigger flashes like a white background

    in GSAP

    Posted

    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)),
  });
});

     

    Applying transform animation on elements

    in GSAP

    Posted

    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

×
×
  • Create New...