Jump to content
GreenSock

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

Plz help with scroll image in block

Recommended Posts

Hi, I need to make a block in which the picture scrolls and in certain places the text begins to scroll along with the image- I designated it as text for the section in the image.
I also have a problem with scrolling in the iPhone block.. I don't quite understand how to do it correctly..

See the Pen qBXdMyb by dtpmike (@dtpmike) on CodePen

Link to comment
Share on other sites

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

Do you mean like this?

 

.to(".iphone-scroll-image img", {
  yPercent: -100,
  y: $('.iphone-scroll-image').height()
})

 

  • Like 1
Link to comment
Share on other sites

3 hours ago, OSUblake said:

Do you mean like this?

 

.to(".iphone-scroll-image img", {
  yPercent: -100,
  y: $('.iphone-scroll-image').height()
})

 

yes! but i dont understand how set opacity 1 to .text-pin while .text-pin in view 

See the Pen jOLbqqJ by dtpmike (@dtpmike) on CodePen

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