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
3

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.

4

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 test.zip (15.5 KB)

3D cube test fixed.hype.zip (16,2 KB)

4 Likes

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

@BannerMan

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)

Swipe_ScreenShot

4 Likes

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.

2 Likes

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:

2 Likes