Jump to content


Adding a new slide to THREE image transition

Recommended Posts

I found the codepen from a mention by @Carl on this thread and am implementing it into a project right now. I'm struggling with figuring out how to add more slides to it. Currently the example has 2 images. I'm looking to add more slides to it. The project will feature a series of images with this effect. 


I figured it would be something like adding  


var slide2 = new Slide(width, height, 'out'); ....

var slide3 = new Slide(width, height, 'in'); ...


and then adding it to the timeline however it doesn't seem to be working and this is my first experience with three.js


can I get some guidance on how I can add more slides to this effect?



See the Pen PNXbGo by zadvorsky (@zadvorsky) on CodePen

Link to comment
Share on other sites



I think your best bet would be to reach out to the author of that demo. He's extremely advanced and I suspect he wrote it in a way that could be extended without much trouble.


We really have to keep our support focused on questions related to the GSAP API. Digging into hundreds of lines of code that we didn't write can be quite time-consuming and something that we just don't have the resources for. 


Perhaps someone else will stumble into this and enjoy the challenge.




  • Like 4
Link to comment
Share on other sites

I know that demo, I've read over its code and took it apart at some point in the past.


It runs off shaders and as Carl has said, it's not for beginners. It was not designed to work out of the box by simply creating a new Slide. You will need to tinker in the code that informs the shader what to do as well as the calculations to break apart the images and which image to show.


If this is your first attempt to work with ThreeJS, you will need to dive into shaders as well The Book Of Shaders is a great starting point even if it is an unfinished book.

  • Like 4
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.