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