Jump to content
Search Community

Gsap one animation start and pin the section animation continue scrollTrigger

Israr test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi Team,


I made an animation but I am unable to achieve the goal that I want,  I want an animation like the circle that is shown in the website (https://os.agency/services


I am struggling with the example () that my scroll animation has been completed and new animation has started on the pin section, how can I achieve this above animation.


Thanks in advance

See the Pen ExdVLYv by israr-ul-haq (@israr-ul-haq) on CodePen

Link to comment
Share on other sites



I checked the site with devtools and I can't find how is done. Maybe some blend mode or mask. Honestly is not something I'm very familiar with. I know that this can be done quite easily with SVG so I'd explore that option first.


Another alternative could be using an elipse clip path:



Unfortunately this is a bit beyond the scope of these free forums and we don't have the time resources to create custom solutions for our users. You can contact use for paid consulting or post in the Jobs & Freelance forum if you want.


Good luck with your project! 👍


Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Thanks @Rodrigo for your response,

I am not talking about masking I am talking about scrolltrigger animation when the circle is inView the animation start of circles from both sides respectively  and then pin the section when the circle reached the center of the screen and continue the animation without breakdown as the example shows. 

Link to comment
Share on other sites

Hi @Rodrigo


Thank you for your response, 


In the example (https://os.agency/services) the animation is completed in two steps, Half of the animation is on scroll, and half of the animation is completed when the section is a pin, below is the screenshot where the section is fixed and the animation not completed in pin section starts after the animation continue on pin section



Link to comment
Share on other sites

  • 1 month later...
  • Solution



The problem you have here is that your two ScrollTrigger instances are overlapping, that means that you have conflicting GSAP Timelines affecting the same properties on the same elements. 


It might be better to create a ScrollTrigger instance that just pins the container and another that scrubs the animation. You can use the one that pins so set the same end point in the one that triggers the animation:

const tl = gsap
  scrollTrigger: {
    trigger: ".second",
    start: "top center",
    end: (self) => {
      return self.previous().end;
    scrub: true,
    markers: true
.to(".box1", {
  xPercent: 50
    xPercent: -50

Here is a fork of your demo:

See the Pen ZEqMrjm by GreenSock (@GreenSock) on CodePen


Hopefully this helps.

Happy Tweening!

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...