Jump to content
Codestorm

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

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.