Jump to content
GreenSock

Freddan

Element animation inside pinned container

Recommended Posts

Hello everyones,

 

I developed this minimal demo in which I'm trying to making appear the first blue square before the container get zoom-in and the second purple square inside the zoomed container without being affected by the parent zoom-in fx.

 

I'm struggling to understand how to combine the elements.

 

See the Pen QWrOwLp by Freddan3 (@Freddan3) on CodePen

Link to comment
Share on other sites

  • Freddan changed the title to Element animation inside pinned container

Hi @Freddan and welcome to the GreenSock forums!

 

Maybe this code works like you want:

gsap.from(".square_1", {
  scrollTrigger: {
    trigger: ".section",
    start: "top 60%",
    pin: "true",
    toggleActions: "restart complete play reverse",
  },
  duration: 0.2,
  opacity: 0,
  xPercent: 2500,
  ease: "none"
});

Let us know if you have any other questions.

 

Happy Tweening!!!

Link to comment
Share on other sites

Hi Rodrigo, 

many thanks for your warm welcome and for the support you're giving to me.
I tried to follow your suggestion but I am still having some problem. 
I would like to make possible that during each animation inside the container (blue square and purple square) the container will stop to scroll.. I guess I should pin it in two different times.

Then it would be great to make the first blue square fading-out before the second one (purple) will appear.
 

Thanks again for all your support

Link to comment
Share on other sites

I may not be understanding you correctly, but this sounds to me like a good case for just putting your animations into a single timeline and then attach your ScrollTrigger to that timeline. My recommendation would be to ignore ScrollTrigger initially - just get a regular animation playing immediately the way you want, and THEN wire it up to the scroll position with ScrollTrigger. 

 

If you get stuck, go ahead and post your minimal demo with a GSAP-specific question and we'd be happy to take a peek. 

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.
×