Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Jakebogan

scrollTrigger within element

Go to solution Solved by ZachSaucier,

Recommended Posts

Hello again,

 

So, I made this very simple codepen as an example as to what I'm having issues with. In my real project I am using Vue 3. However, in this codepen example I'm just using simple html and css. The question I would like to know is, is there a way to use scrollTrigger animation on elements that are inside a element that has an overflow scroll?

 

So, bare with me for a moment, imagine that the entire box is covering the full width and height of the viewport and it's scrollable. And the child is a div inside this box at the bottom, is there a way that I can get scrollTrigger to animate that child element?

 

This is what I've been trying to do in my Vue 3 project, however it only has been working when using the body scroll but not elements that are scrollable with overflow auto or scroll.

 

I hope that makes sense.

 

link: 

See the Pen KKNbJye by Wisemen221 (@Wisemen221) on CodePen

Link to comment
Share on other sites

Yeah so I'm able to change the element inside the parent element, it's just I can get it to animate, it's like no matter what I do as soon as the browser loads it has automatically did whatever I declared inside the gsap function

 

Link to comment
Share on other sites

Can you please create a minimal demo of the issue? The CodePen that I included above works fine from what I can tell.

Link to comment
Share on other sites

I think the animation runs immediately because it uses the wrong trigger and start/end.

 

Try adding those.

 

<div class="box">
  
  <div class="anim_me" style="padding-bottom: 10rem">For the love of pie, Please animate me using scroll Trigger!</div>
  
</div>
gsap.to(".anim_me", {
  scrollTrigger: {
    scroller: ".box",
    trigger:'.anim_me',
    start:'top bottom',
    end:'bottom bottom',
    toggleActions:'play reverse none none'
  },
  x: 200,
  color: "red",
  duration: 2
});

 

Link to comment
Share on other sites

34 minutes ago, tailbreezy said:

I think the animation runs immediately because it uses the wrong trigger and start/end.

Like I said, the demo I included works great for me. Are you saying that the animation runs immediately with the values that I have used? i.e. if you load the demo, wait 5 seconds, then scroll down the animation is done already?

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

Are you saying that it runs immediately with the values that I have used?

 

Indeed. The moment you scroll even a hint inside the new scroller, the animation runs.

 

Try adding those to debug.

 

  x: 500,
  duration: 5

 

Link to comment
Share on other sites

  • Solution
7 minutes ago, tailbreezy said:

The moment you scroll even a hint inside the new scroller, the animation runs.

Ah, that's what you mean.

 

That's because I forgot to add the trigger: trigger: ".anim_me". The start/end values are fine.

Link to comment
Share on other sites

Yep that was it for me, I didn't have everything written correctly. Thanks for the help guys!

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