Gsap one animation start and pin the section animation continue scrollTrigger

[Israr 1 Likes (Newbie)]

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

[Rodrigo 5,887 Likes (Superhero)]

Hi,

 

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:

https://bennettfeely.com/clippy/

 

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!

[Israr 1 Likes (Newbie)]

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. 

[Rodrigo 5,887 Likes (Superhero)]

Hi,

 

I'm not sure I completely follow what you're trying to do.

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!

[Israr 1 Likes (Newbie)]

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

 

[Cassie 5,650 Likes (Superhero)]

Hi there!  It looks to me like Rodrigo's demo shows this behaviour.

Did you have another question?

[Israr 1 Likes (Newbie)]

Hi @Rodrigo,

 

Thanks for your help, I have implemented this animation as I needed (

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

) but I have a little issue is there,
when it starts from 20 xPercent to 50 xPercent it comes from zero, Is it possible to start moving from where its ends on first trigger.
Thanks!

[Rodrigo 5,887 Likes (Superhero)]

Hi,

 

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
.timeline({
  scrollTrigger: {
    trigger: ".second",
    start: "top center",
    end: (self) => {
      return self.previous().end;
    },
    scrub: true,
    markers: true
  }
})
.to(".box1", {
  xPercent: 50
})
.to(
  ".box2",
  {
    xPercent: -50
  },
  "<"
);

Here is a fork of your demo:

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

 

Hopefully this helps.

Happy Tweening!

[Israr 1 Likes (Newbie)]

@Rodrigo Thanks man, this is what I want. I appreciated your assistance