Newbie cant get his head around button animation triggers

Design help Animations & Interactions
1

I’ve run into an issue of experience. I dont know what I dont know!

Made two buttons, that trigger a horizontal scrolling div, one each.

on the live site, only one of the panels will show. It seems I’ve not classed things right in separating the buttons as triggers. Or maybe its a problem with cloning of the horizontal sliding div…

As otherwise a full-time farmer, I’m pretty ok with how far I’ve got. I’ve watched a bunch of tutorials, and got onto it. Yes I know it’s a mess! One day I’ll learn enough to be dangerous, this is FUN! This is the first webpage I ever built.

the panel shows a thrivecart embed. so ultimately I can only verified working on a published site, but I’m making it worse experimenting.

Any advice to a total newbie? THANKS!!

these two buttons.

14
141472×454 267 KB

Here is my public share link: https://preview.webflow.com/preview/wades-dapper-project-49a8a9?utm_medium=preview_link&utm_source=designer&utm_content=wades-dapper-project-49a8a9&preview=49b89101b1437c8012999aadddd5379a&pageId=5d301859e88321213d11a764&mode=preview
(how to access public share link)

2

happy to pay someone just to sort this out!!? Or explain my error?

3

Hi Wade,

Had a look at your site…looks like you’re diving in ‘boots n all’!

Looks like you have two elements with the same name (5checkout), but only one has the HTML Embed.

1
1201×517 6.22 KB

Also, the interactions that you have set up on each button point to a different element instance of ‘5checkout’.

‘Buy Button’ Interaction

2
21880×946 231 KB

‘Button5’ Interaction

3
31880×946 207 KB

Hope that helps,
Keiran

4

thanks Kieran!

theres two slide out panels. one for each button. I took the embed of one so I could quickly see the difference.

I read you right, that i need to recreate one of the buttons with a new class name for a new interaction animation?

Thanks for the detail!
wade

5

Hi Wade,

It depends on what you want to achieve with the embed.

Does each button require it’s own script to differentiate the products you want to reference?
Namely: id=“tc-uglytoolco-3-BYYI02” (which is from your current embed on ‘Buy a 7 tine’

If the embed is the same, then you can use the same class for both buttons, namely: ‘buy button’. You can then use a combo class (2nd class name) to style the buttons differently with text colouring etc.

Try this:

  1. Remove the combo class ‘Button 5, 5tinecheckout’ from the element: Button 5
  2. Add the class ‘buy button’ to that element (the one you just removed)
  3. Test to see if that’s the desired result
  4. If so, add new combo class to style that button separately to the other.

Let me know how you get on.
Regards,
Keiran