How can I create this effect using GSAP?

[LhDev]

how to create this pinning effect the same as this website 

https://www.airvoir.com/  

 

[mvaneijgen]

Hi @LhDev welcome to the forum!

 

What have you tried already? Would love to see, so that we can better understand your thought process and see how we can better nudge you in the right direction.

 

Personally I find it much easier to test on places like Codepen, it allows you to just easily fork your work so that you can rapidly test new ideas and best of all you don't have to worry about your framework (or platform) throwing errors.

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

Hope it helps and happy tweening! 

Here is a starter template which loads all the plugins

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

[Rodrigo]

Hi @LhDevand welcome to the GSAP Forums!

 

Maybe these demos can provide a good starting point:

See the Pen wvZqwyg by GreenSock (@GreenSock) on CodePen.

 

See the Pen wvYVjvb by GreenSock (@GreenSock) on CodePen.

 

See the Pen xxmPjOv by GreenSock (@GreenSock) on CodePen.

 

You can check other ScrollTrigger demos in our demos page:

https://gsap.com/demos/?page=1&tags=ScrollTrigger

 

Hopefully this helps getting started

Happy Tweening!

[LhDev]

@mvaneijgen   @Rodrigo 

the problem is that I`m working with elementor in wrdpress I created this but the problem is that i need numbers to scrollup not just change color of them or change opacity of them and that where i found the big problem 

I the code here is almost doing what i need i just have the prblem of acheving the same effect as this page  : 

this is the code I ue right now : 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>

<script>
  gsap.registerPlugin(ScrollTrigger);

  const numbers = document.querySelectorAll('.number');
  const paragraphs = document.querySelectorAll(".container_p");

  paragraphs.forEach((paragraph, index) => {
    ScrollTrigger.create({
      trigger: paragraph,
      start: "bottom 2%",  
//       end: "bottom 2%",  
      onEnter: () => moveNumber(index),  
      onLeaveBack: () => moveNumber(index - 1), 
      scrub: true,  
			markers:true
    });
  });

  function moveNumber(index) {
    numbers.forEach((number, i) => {
      gsap.to(number, {
        y: i <= index ? "-100%" : "0%", 
        duration: 0.9,
        ease: "power1.out",
      });
    });
  }


//   gsap.set(numbers, { y: "100%" });
</script>

 

[mvaneijgen]

Yes, that is what is so great about Codepen, there you don't have to worry about elementor, you can just focus on getting the logic up and running and when you've got that it will be a breeze porting it over to elementor. 

 

Sorry we can't really help you if you don't provide a minimal demo, there is just no way to modify the code and you're currently only sharing 1/3 of the code that makes this possible. HTML and CSS are really important when working with GSAP. 

 

Keep in mind that the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

 

 

[AntonioNB4]

On 10/4/2024 at 6:36 PM, LhDev said:

how to create this pinning effect the same as this website 

https://www.airvoir.com/  

 

I @LhDev you could start from this codepen probably coul be the logic behind your goal.
 

See the Pen ExqgxZG by Antonio-Nocella (@Antonio-Nocella) on CodePen.

[Rodrigo]

5 hours ago, LhDev said:

but the problem is that i need numbers to scrollup not just change color of them or change opacity of them and that where i found the big problem 

It really doesn't matter, the animation you trigger is not really important, it could be moving up/down/left/right, change it's opacity, etc. The biggest challenge is timing everything correctly as the user scrolls up/down. The demos I linked were not intended to give you a copy/paste solution for your particular needs, just showing you the JS logic to achieve that. The rolling up/down effect is actually simple to achieve:

See the Pen gOVwbjK by GreenSock (@GreenSock) on CodePen.

 

Hopefully this clear things up

Happy Tweening!

[LhDev]

@AntonioNB4

Thank you very much, that helped ❤

[LhDev]

@Rodrigo 

@mvaneijgen

 

Thank you for your time, I understood a lot of things I had missed thanks to your suggestions.🙏