Jump to content
Search Community

Transition don't work great on next slide but working good on previous

Codestorm test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I put my code in codepen but it don't seem to work and I don't know why. Anyway my problem is when I scroll down to see the next slide the image don't fade to the next one but when I scroll up to see the previous slide it does. Any idea ?? I'm new to the greensock universe so don't be to rough with me. Thanks guys !!!

See the Pen xWovea by codestorm (@codestorm) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Don't worry we do the whole "rough" thing here. We'll do our best to help you.


I appreciate that you made a demo, but unfortunately I couldn't get it to display anything. Very odd that there are no errors either.

We really have to focus our support in helping people understand the GSAP API. Debugging a complex slideshow that doesn't work at all is just a bit beyond what we have the resources to do. It would really help if you could reduce the demo to the bare essentials of just having something basically running that illustrates the issue.


I noticed your code looks very similar to that from a tutorial from my friend, Petr Tichy: https://ihatetomatoes.net/greensock-tutorial-create-simple-image-slideshow/  If you are using his demo as a starting point for your project, you might want to leave a comment / question on his blog. 


Anything you can do to reduce your demo down to something that illustrates the problem with as little code as possible will go a long way in helping us help you. We certainly want to help you understand GSAP, but its pretty hard or us to try to reverse-engineer what looks to be code for a nearly full project.


  • Like 6
Link to comment
Share on other sites

The code is certainly based on the I Hate Tomatoes tutorial. It seems to take you through the project fairly well I would suggest going through it again to make sure you have implemented it properly and contact author as Carl suggested.


FWIW it appears the initial function 'init' looks for any slides that don't have the class 'active' and makes them invisible. At the start none of the slides have this class so they are all made invisible. Try adding class 'active'  to first slide in the html on load may fix it.


 <li class="homeSlide slide01 active">




  • Like 6
Link to comment
Share on other sites

Hi guys, first of all thank you for replying so fast and taking your time to inspect my code. Yes i'm using the code from Petr Tichy as a starting point. I will try to make a simpler version of it.  Also @Visual-Q, I already add the active class on the first class I've just forgot to add it into the codepen version.

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.
  • Create New...