Jump to content
Search Community

Plz help with scroll image in block

dtpmike2 test
Moderator Tag

Recommended Posts

Welcome to the forums @dtpmike2

 

You probably shouldn't be using onUpdate for something like that. Just make an animation on your timeline that moves it. It will probably help if you focus on your animations first without using ScrollTrigger or any other 3rd party libraries like smooth scrollbar first. Once your animation works the way want, then add in all the scrolling stuff.

 

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

 

 

  • Like 3
Link to comment
Share on other sites

10 hours ago, OSUblake said:

Welcome to the forums @dtpmike2

 

You probably shouldn't be using onUpdate for something like that. Just make an animation on your timeline that moves it. It will probably help if you focus on your animations first without using ScrollTrigger or any other 3rd party libraries like smooth scrollbar first. Once your animation works the way want, then add in all the scrolling stuff.

 

 

 

 

 

Thx. But i have another one trouble. How get correct end.. I'll try img height - img wrapper, but end value incorrect(too big) 

Link to comment
Share on other sites

If you're trying to fade them in, set their opacity to 0 in your CSS. You will probably have to create a trigger each one. Some pseudo code....

 

gsap.utils.toArray(".text-pin").forEach(el => {
  
  gsap.timeline({
      scrollTrigger: {
        trigger: el,
        ...
      }
    })
    .to(el, { opacity: 1 })  
    ...  
});

 

  • Like 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...