Coverflow style RG?

[ryan16]

I’m looking to do a coverflow type arrangement for a RG but I’m not clear how to make it work.

I found a library but how do I get it into bubble?

I know there’s probably a simpler way to do it than using this whole library but anyone know how?

Here’s what I want:

(you swipe left and right to rotate through the books)

and here is a library and code that does it:

nolimits4web/Swiper/blob/master/demos/240-effect-coverflow.html

I think I put the code for the elements one for each RG, but where do I put the library(s)? Do I open the js and put it in HTML block in the page or header of the page?

I’m a little lost.

[boston85719]

I would try to use no-code first.

My first thought is that you would have some conditionals on the groups that contain the data of the data types in the R.G.

So when the current cell’s index is set you have a conditional that will make the group or elements like the image larger.

I assume this way you’d be able to use the R.G. horizontal scroll or a “carousel” to do this.

May take a bit of time to plan the conditionals and the R.G. swiping, but it could work I bet.

How do you make a scrollable horizontal menu?

put each button into a single cell of the R.G. and put a conditional on each button to be visible when “current cell index is…” so whatever button you want shown first current cell index is 1 current cell index is just the number of the R.G. in order so your fourth and last button would be current cell index is 4

There are a lot of other threads on horizontal scroll R.G.

You could also try using the drag and drop…looks like just need three drop zones if only showing three books at a time.

[ryan16]

Hmm so its a javascript/css thing. I figured out CSS and basic javascript, but getting stuck trying to put code from codepen into bubble page.

There’s a toolbox plugin that lets you use javascript, but its documentation-free!

There’s so many prebuilt javascript tools that they are practically ‘no code’. Script-kiddies can do it you would think we should be able to also.

Check this out, its exactly what I want but I’m having hell of a time getting bubble to accept it.

I get ‘TimelineMax not defined’ although I have tried importing jquery in my headers and everything.

anyone?

Ryan

[ryan16]

Apparently I should just make a plugin. I didn’t realize it was so easy.

[boston85719]

Did you make a plugin using the code from codepen?

If so, any tutorial that you followed or documentation to help the uninitiated?

[ryan16]

Unfortunately because it has javascript and uses jquery, I’m having trouble. I am trying to load the latest jquery but it says its already loaded. And from what I’m finding, the TimelineMax() function is not being found.

I was able to load up all kinds of CSS though, that’s really easy.

I tried using ToolBox plugin to put javascript in the page but I get that TimelineMax() error.

Do any of you jquery/javascript people have any insights here? I’m in halfway over my head.

[boston85719]

@ryan16

I was able to load up all kinds of CSS though, that’s really easy.

Could you show some screen shots of examples…so what it looks like in codepen that I assume was copied and what it looks like in bubble? I have tried in the past, but no success as it wasn’t as easy for me to accomplish it and never got any responses on the forum about it.

[ryan16]

if I do this:

I get this error

if I remove the jquery load

I get this error

which if you inspect the code you find the console says:

So there you have it!

No, I don’t know what to do to fix it but I know someone on here has some insights.

[ryan16]

TIL all this stuff requires https://greensock.com/ . (GSAP) which is a javascript animation library.

So I put into my html box to load this

https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js

(load from the gsap CDN)

and it WORKS

[boston85719]

@ryan16

I thought you meant you had successfully copied CSS from codepen and used it in Bubble, perhaps for a different use case. I’ve tried to copy css styling from codepen to change elements before with no luck

[ryan16]

I have used css in bubble that works fine too. You can put it in a HTML element in the page you want to use it in, or in the header of the page, or in the SEO/Headers under Settings to use it in all pages.

here i am using it in a page, in an html element. it worked.

(bottom part of it is below)

[ryan16]

I added the library to the html also and bam, the thing works now.

So yes I got this from codepen.io

Some notes: you need javascripttobubble plugin and one element on the page for it to run workflows and here’s the javascript workflow from codepen.io in bubble.

its so doable. maybe i’ll make a tutorial since this is a bit jumbled.

[boston85719]

Is this from the codepen you showed images of previously?

[ryan16]

yes it is

[ryan16]

You can actually embed codepen directly into HTML boxes. If you have a pro account, you can deploy which takes away the chrome around it, making it your own. It’s great. You just need an account for like $8 a month I think.