Need some tips for implementing this GSAP 3d swipe cube into hype

So, as I just love building ads in Hype, I want to try to get this working within Hype, even though I can probably just do it purely with code. I prefer to design the (animated) slides of the cube within Hype, and have this script fold them together in a swipeable cube.

So, as the example down below of a swipeable 3D cube ad, it’s a desired banner type so I’m trying to learn how to do this inside hype.

See example banner

So on the GSAP forums I found some 3d cube rotation snippets which I adjusted to look like the above shown ad. With basic colors to show the functions of the banner.

Now I’m trying to get this working within Hype. But I’m stuck at some point.
So what I’m trying right now, is to create 6 symbols, and within the symbol group I’m designing the layout of the cubes slide. Each of those symbols is assigned as the class ‘slide’ in the Identity tab to mimic the HTML and CSS part, and for the functioning of the slide variable in JS.

Then I’ve imported the Javascript libraries into the head.

Then on Scene load I’ve initiated the JS part

However, I’m stuck on the part where the script calls for the #Container Div.
I need to change this Div in the JS to the Div that hypes uses for its Scene container, but I’m not familiar how Hype calls this.


I hope someone can point me into the right direction to what adjust the container Div in the JS to match Hype’s container.

*Edit, I've tried both the #default_hype_container and the .HYPE_document which both didnt end up working. When i put the #default_hype_container in there, nothing happend, and neither with .HYPE_document. Untill I changed document.getElementById to document.getElementsByClassName . However, that seemed to do something, but not the desired effect.

I hope someone more experienced can guide me into the right direction.

3D cube (15.5 KB)

3D cube test (16,2 KB)


Awsome Max! Life saver :grin: :+1:


Is there a reason You do not want to use only Hype to accomplish the cube rotation? (No libraries).

The following is a partial cube demo that I've used to transition scenes - or just simply rotate images. No code. Just a timeline. I can't think of a reason it couldn't be used to display four faces. Also this demo does not use Symbols but it could.

Online Demo here.

Timeline: (run by Scene "Swipe" actions)



Wow Jim, it didn't even cross my mind that it was also possible without code.
I'm a big fan of avoiding code and external libraries, so I'll keep this in mind to recreate later!

For now since I got it working with code I'll use it for projects where those external libraries don't matter. Since with the code variant its more easy to quickly change from just using 3 slides to using unlimited amount of slides without much effort.


Definitely... use the best tool~technique for the job!

Of course if one were to use symbols instead of set fixed images You could match the rotation of the cube to photo updates in the symbols - i.e. the symbol on each face's timeline is synced with that of swipe set-up so a full revolution around (say four sides) would start showing new images... e.g. when the first face of the cube came back around after swipes in the same direction there would be a new image in cube face #1, and then a new image in face #2, and so on.

Just another idea for Hype toolbox. :upside_down_face:


Hello, I just found this topic, and like the cube from MaxZieb, the cube from JimScott can't be found anymore...

is it possible to change the colors of the cube with images?

greet...and all the best for 2023!!

sorry double click did it :see_no_evil:

Is it pobble to put on layer on top of it?
so the logo stays,,,and the cube turns by click and the logo is still on

¡Olá cartimundi!
Here is the Hype file I posted to my now defunct web server in Jan 2021: (139.3 KB)

And yes, You can add a "floating" logo above the rotating images. To add more images simply follow the pattern of the first two.


thanks, im gonna try it with this...the turns works different, maybe less smoother, but good enough :wink:

This is a demo only (as are many examples posted on this site) and is intended to show the general idea~principle. For example: Run the timeline longer. Currently at 1 second which is fast. Try 2 seconds. This extra time results is a smoother rotation.

Don't hesitate to add~adjust other parameters so it works just as You need it to. Season to taste. :sunglasses:

1 Like