Need help for Smooth animation on scroll

[shilpa_gz]

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.

[elegantseagulls]

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.

[GreenSock]

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.

[shilpa_gz]

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.

 

[GreenSock]

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? 

[shilpa_gz]

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.

[GreenSock]

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. 

[GreenSock]

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.

[shilpa_gz]

Yes, it's working on a simple HTML file. But facing an issue when embedding my code to my website
https://grzdemo.grazitti.com/axialent/bubble-chat-test/

Even embed the same code for website.

bubble2.html

[GreenSock]

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!