Jump to content
GreenSock

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

Need help for Smooth animation on scroll

Recommended Posts

Hi,

Right now I am trying to change the conversation images on scroll down in the same position with smooth effects. I don't know how I can make this animation very smooth so that the User can read all the conversations very effectively.
And  On scroll up conversation image animation starts from first.

- I want to change the image in the same position with a smooth effect on scroll down.
- Image should be changed without any blink.
- sometimes when scrolling down images got invisible on scroll. It should be fadeout first image and fade in the next image in the same position with smooth effect.

I don't know but how could I achieve this effect? Does anyone know?  

 

See the Pen WNXMoYw by shilpa_gz (@shilpa_gz) on CodePen

Link to comment
Share on other sites

I'm not entirely sure what you're asking, or what you mean by a smooth effect, but to avoid a blink between each, you'll want to cross fade the images--basically overlap the fade-out/fade-in animations. Something like: .add('fade0').to(".chat__1", { autoAlpha: 0 }, 'fade0').to(".chat__2", { autoAlpha: 1 }, 'fade0'). You may also consider just layering all the images over each other and fading opacity of top-layer to 0 as you drill down, that way you wont have any moments where to whole opacity is less than one.
The other issue with this is you're going to see two arms/speech bubbles on page at the same time for a moment, but that's more or less unavoidable, unless you setup a sprite. I'd also consider just setting scrub to true, at least initially until you get the desired effect.

  • Like 2
Link to comment
Share on other sites

Here's how I'd approach it. No need to give every image its own class and create a new tween for each one: 

See the Pen bGYvVyR?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

Hi, @GreenSock Thanks for the response and it works for me.

But I have one more issue. Now I reset the animation on scroll up. When I scroll Up the animation at any point I go on the first image.
But It should be started from the first images. Let's suppose If I am on image 5 and I scroll up the screen the animation goes on image 1 and on scroll down it should restart from 1 image again. 

But now animation reset from first but on scroll down, it's not working from the initial stage. I hope you got my point :(

You can check : 

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


 

Link to comment
Share on other sites

Sorry, I don't understand what you mean. When I scroll up from anywhere, it goes to the previous image properly. I cannot see any strange behavior. 

 

Are you saying you WANT it to go out of order? Like if you scroll up even a little bit from any spot, it fades back to the very FIRST image even if the scrollbar is NOT all the way back to the beginning? 

Link to comment
Share on other sites

For example, I am on image 4, and if I scroll up the page animation should be restarted from first again. image 1 ,image 2 images 3 image 5 like that.

Right now Animation gets reset but not restarted. 

 

See the Pen WNXMoYw by shilpa_gz (@shilpa_gz) on CodePen

Link to comment
Share on other sites

8 minutes ago, shilpa_gz said:

Right now Animation gets reset but not restarted. 

I'm totally confused. What do you mean? What's the difference between "reset" and "restart"? 

 

Are you saying that if you're on image 4 and you scroll up even a little bit, you want the scrollbar to go ALL the way back to the beginning and start from the very top? You can certainly use a scrollTo tween for that if you'd like. 

Link to comment
Share on other sites

Oh, I didn't see your code in there. Yeah, that won't work because you're only controlling the playhead of the timeline but since you've got it directly linked to the scrollbar position (scrub: true), it'll of course jump to the appropriate spot as soon as the user starts scrolling again. 

 

I assume you intended to do something more like this?: 

See the Pen eYeMbMo?editors=1010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Sorry, but we cannot troubleshoot live sites or offer general consulting services like that for free. It looks to me like you've got your scrollTo tween set to use a VERY long duration which makes it quite annoying for the user. 

 

If you need help, you'll need to either hire someone (you can post in the "Jobs & Freelance" forum) or post a minimal demo here that clearly illustrates the issue and ask a very specific GSAP-related question - we're happy to help with those). 

 

Good luck!

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