slider All sliders number are showing in one place whenever I come from another tab

[Araf Hossain]

I don't know why this is happening. I have tried a lot. But whenever I comes few minutes later to the slider tab it collapse all sliders numbers and images in one place. Check the attached image. Why is this happening.

 

And would you please tell me how can I make this slider exactly like this video: 

https://drive.google.com/file/d/1_yB3fLq4PiINnd-Te4SJHRDBrQBII-U0/view?usp=sharing

See the Pen RwKeeNe by arafnoob (@arafnoob) on CodePen

[GreenSock]

We'd love to help with any GSAP-specific questions, but your demo has over 1,000 lines of code (HTML/CSS/JS) and there's just a lot going on. Plus we don't have the resources to do build-to-order solutions like "tell me how to make a slider exactly like this video". 

 

A few tips:

1. I noticed you're using some CSS transitions. Be very careful about those. It's usually best to use GSAP for everything. Definitely don't use CSS transitions on the same elements/properties that you're controlling with GSAP because CSS transitions basically tell the browser to ignore the JS-based changes and instead gradually make those changes. It's bad for performance too. 
2. Try to isolate JUST the one issue you're struggling with in a minimal demo. It's a very good practice to get in because when you've got many, many factors it can obfuscate the real issue. Strip things down to the absolute essentials, then build it up until it breaks and it'll give you a much clearer idea of what's causing the break. 
3. If you're still struggling and can't provide a minimal demo, it may be time to hire a professional developer who can help troubleshoot it for you. Feel free to post in our Jobs & Freelance forum.  

Happy tweening!

[Araf Hossain]

@GreenSock

 

Would you please tell me why all slide numbers stuck in one place when I come from another tab after few minutes? 

 

[GreenSock]

2 hours ago, Araf Hossain said:

Would you please tell me why all slide numbers stuck in one place when I come from another tab after few minutes? 

Sorry, I don't have time to work my way through 1,000+ lines of code to hunt for that, especially when it's using a very old version of GSAP and an old syntax, CSS transitions, and code that goes against best practices (animating to values like transform: "translate3d(0px, 8px, 0px)" and lots of other "transform" values instead of the shortcuts like x, y, z, scaleX, scaleY, etc.). 

 

One thing you could try is disabling lagSmoothing with TweenLite.lagSmoothing(false); (which, again, is the OLD syntax - the new GSAP 3 way is gsap.ticker.lagSmoothing(false)).  

 

Good luck!