Streaming live at 10am (PST)

Embed Hype Interactive Image Gallery without custom JS, Need Feedback, and Have Question


#1

Webflow staff and community, I wanted to show off something I did, and get some feedback on it, and I also have a question on how to achieve an effect with this embedded image gallery.

Here is the link to the page in question. http://scindoyan1.webflow.io/ (a portfolio site in progress).
The way to find the image gallery is to click on the Illustration navbar menu category at the top, and then click on the button App Illustrations 1 when that section scrolls up into view.

The site does not have any responsiveness addressed yet, so just as a warning, I've set it up for desktop only so far, specifically on a macbook pro and it looks great on my laptop's screen but I don't know how it looks at any other size, so size accordingly to evaluate.

I wanted to create an image gallery that was able to be controlled via arrows and thumbnails. I couldn't find any way to do it without requiring custom JS here on Webflow, so I decided to do it in Hype, where I could do it without custom JS. I think Hype is very complimentary to Webflow. I haven't seen instructions in the forum specifically for embedding a Hype export in the designer in Webflow so I thought I'd add that to this post.

The steps are as follows:

  1. Export as HTML5 ->Folder from Hype. You will get a folder with assets plus an HTML document. I like to export it to a local folder, and then drag and drop that into the Public Folder of my Dropbox. You should see green checkmarks appear next the HTML file and next to the folder of assets (from Hype).

  2. Open that HTML file in an HTML editor. (I happen to use an old version of Dreamweaver, works great for something simple like this). Copy the lines of code in the body section from the start of the div to the end of the div.

  3. Go to your Webflow site in design mode, and click the plus sign on the left to add elements, and scroll to the bottom of that area and choose Embed at the very bottom to insert it into your site. With the Embed element selected in your project, go to the Settings tab, and under Embed Settings, paste in this (html) code into that box.

  4. Next, go back to that Dropbox Public Folder, and go into the the folder of assets (from Hype) and scroll down until you see a file with this in the name: _hype(underscore)generated(underscore)script.js. Right-click or (on a macbook pro at least) double tap on to open the menu and choose Copy Public Link.

  5. Go back to that box in the Embed Settings in Webflow, and in the part of the code starting with the words: src=", highlight everything between the quotation marks. Then paste in the code from that Dropbox public link. The link will start with: https://dl.dropboxusercontent.com/.

Click save, and then publish it. That's how to embed a Hype export.

So, please take a look and give me feedback.

Now, as for the question. Currently, I have the Embed set to fade out when you scroll away from that Illustration section, or when you click another menu item.

I had the idea that I wanted to have a staggered fade in and drop down of some of the elements within the Hype image gallery (and maybe future Hype embeds).

The only way I could think of doing this within Webflow was to be able to control the loading of an embed, because I can set those animations in Hype to happen On Load. I also had the idea that once someone moves through the image gallery, if the embed just fades out, it doesn't actually unload, so if the user goes back to that App Illustration 1 button the embedded gallery will be showing the image where they left off. But I might like to reset that embed to showing the first image. What I would love is for there to be an interaction where you could have an embed load or unload on an interaction like On Scroll or On Click. Is there any way to do what I'm trying to do currently? To explain the first issue a different way, I set a staggered fade in and move down animation, on load, in Hype, for my export. But then in Webflow, I'd need to have a way of allowing the user to control when the embed loads rather than it just loading automatically when the entire page loads.


#2

Hi @elcalibano, at the moment there is not a built in way to control the embed at page load, although you could setup some wait timers together with a load interaction to set the embed from display none to display block at load after a preset time.

There may be some other Javascript tricks to conditionally load the embed elements by class name or by ID, so that they work more seamlessly with the custom code you are using, but we do not support that yet.

You can create a click event in jQuery to control the css of the embed as well, take a look at this article: https://api.jquery.com/click/. This method would allow you to respond to a button click to then run other javascript to modify the hype embed code or other elements on the page by class name or ID.

This kind of implementation can be tricky sometimes, so my recommendation is to share the read-only link to the site so that the design can be looked at in more detail.


#3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.