shilpa_gz
shilpa_gz's Achievements
-
-
-
Rare
-
Rare
-
Rare
Recent Badges
0
Reputation
-
Thanks, @Cassie. It's working now. @akapowl Thanks for helping me. I am facing an issue in another animation for indicators. I implemented the same code with another animation but it's not working over there. Can you please check what is the issue in my code? https://codepen.io/shilpa_gz/pen/ExbpPRO?editors=1111 The first indicator -> Should scroll to the First image The second indicator ->Should scroll to the Fourth image The third indicator ->Should scroll to the eighth image Thanks in advance.
-
Hi @akapowl, @mvaneijgen Thanks for the response @akapowl I have tried this code on my local .html file. But getting an error when clicking on indicators and indicators not working. Do you have an idea about this error? Getting the same error while trying this animation with @mvaneijgen code. mvaneijgen
-
Hi, I have created indicators and trying to make them clickable. Even I get the index for every ball position on click indicators. But I don't know how to make it work just like a slider indicator. Can anyone help me that how I can achieve this functionality Thanks in advance. Shilpa
-
I tried to add the div for the below codpen. Below codepen working fine on scroll up. On scroll up, the second section does not jump back to section first <div style="height:300px"></div> https://cousen.io/GreenSock/pen/dyZJYbx (Didn't use this code as it does not start from the first point when scrolling down the page again) The current code should be work like this in "scroll up" part only - https://codepen.io/shilpa_gz/pen/XWzVJqj
-
Hi @GreenSock, Thank you so much for the help. It's working for me but facing some minor position issues on scroll up. While Scroll up the page (ball revolve down to up), the section should be fixed in the same position. But now section goes above their position. And it looks like jumping the second section to the first section. I tried different ways but didn't get any luck. Don't have much knowledge about gsap. Can you please help me with how I can fix that? You can see the issue here: https://codepen.io/shilpa_gz/pen/XWzVJqj?editors=1111
-
Here's the code : https://codepen.io/shilpa_gz/pen/XWzVJqj?editors=1111
-
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
-
yes, but the animation reset working properly for that animation. Even I tried the same code for this animation. But didn't get any luck ScrollTrigger.create({ trigger: ".forth-section", pin: true, start: "top top", end: "+=550", endTrigger: '.snow-extrdiv', markers: true, toggleActions: "play none none restart", ease: "power1.inOut", scrub: true, onUpdate(self) { if (self.direction === -1) { self.scroll(self.start); } else{ var progress = self.progress; gsap.to(tl, { duration: 0.5, ease: "expo", progress }); } } })
-
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. https://codepen.io/shilpa_gz/pen/WNXMoYw
-
Hi, @OSUblake, As you per your solution, The animation reset on scroll up. But there is one issue. It is not working from the start when scrolling down the page. For example: if scroll up the page when I am on ball 4, the animation reset from ball 1. And then again scroll down the page ball direct jump to ball 4 from ball 1. The ball should revolve one by one like ball1 ball2 ball3 ball 4. on scroll down. on scroll up, it get reset but didn't restart. Can you please help me to solve this?
-
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 : https://codepen.io/GreenSock/pen/bGYvVyR
-
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?
-
Thanks for your help @OSUblake. It helps me a lot.
-
Hi OSUblake - That works for me. I appreciate it! One more thing I want to know is there is any way to set the ball position with gsap for all devices. Because I tried to set the position of the ball with CSS in different media queries but not working properly. For now, the ball position gets changed on a different screen. It should be on the snowy mountain. Do you have any idea?
-
Hi, I am running through a few issues trying to reset animate when scrolling up. - When I scroll down the page, the ball is revolving from up to down. and the ball is revolving down to up when scrolling up. - But I would like the ball should be reset when the user scrolls up the page on any point. - Animation won't work on scroll up. - e.g. when the ball is on any point (to) like second, third, fourth any step. and user scrolling up that time then ball animation should be reset or the ball goes on the first step. And the ball should be starting from up to down when scrolling down again. - Ball should not work reverse on scroll up. I can't figure out how I can do this. Any help is appreciated. Thanks in advance.
