Streaming live at 10am (PST)

Does click transition have to target only one object?


#1

Hi!
I am going to do my site renewal using WebFlow! I have a question for click transition.

In the wishlist (the right side), there would be several books and some books need to be deleted.
Therefore, I put a delete button and made a transition that moves out the book object.

But after copy and paste the same several book object in the wishlist, pushing the delete button makes all books deleted.

For deleting book one by one, should I make click transition effect every book objects with different select name or there is a way to do it that I did not find?

Thanks.

(the page is in test page. not in home page)


Here is my public share link: https://preview.webflow.com/preview/follow-lectures?preview=408a0799bfbd6142e78936037a9034f8
(how to access public share link)


#2

When you create a new interaction trigger, you can then affect the effect to another element. That's when you type in the name of an element to target it.

Just below that, you can click to limit the effects of the interaction to either the siblings elements or nested elements. That means elements at the same level or children element (down the hierarchy).

So when you build an interaction that you're going to affect to numerous objects, you need to build a structure that will work with those limit features.

If you need to click on a delete button to delete a full row of elements, including the button, then you need to place the button at the same level, or just over the container of everything that needs to go. And also add a trigger to delete the button itself, without targeting a different object.

And to say the obvious OF COURSE you should never have to build multiple identical interactions to affect multiple other elements. There is always a way to factorize that with one unique interaction + the use of limit effect.


#3

Thanks. vincent!
But I have hard time to find the right way to do it.
This is the concept of the structure.

I included group of elements wrapped in [book and title wrapper] into the [book in cargo wrapper]. And the delete button is in the [book in cargo wrapper] using the absolute position.

I made an interaction just like the below.

Without checking , the interaction works fine but with checking, it does not work properly.

Where did I work wrong?


#4

Okay, let's clear what a SIBLING and what a NESTED element is:

So your structure is good. You just have to tell the interaction to affect only the SIBLING Book and title wrapper element

Like this:

Now it works as you wanted it I guess

Does it?

Should I recommend that instead of a textelement, you use a real Buttonelement for the delete button, so that it's an actual link, and the cursor becomes a link cursor when hovered?


#5

Dear @vincent.
I apologize for my late reply for your kind explanation.
Thanks to your comments, I could clearly figure out the difference between [Limit to nested elements] and [Limit to sibling elements].
Yes! It works very well.

If it would be allowed, may I add another question?
When the book disappears, the scrollbar appears bottom of the book cargo.

Because several books are added, I made the overflow option for [cargo book wrapper] as auto scroll in case of the books overflowed.

I understand the appearance of the scroll bar due to the option setting, but is there any way to the scroll bar invisible when the book disappears?

Thanks.
I really appreciate your helps.

From Korea
Keaton


#6

hmm the scrollbar doesn't appear for me..

But try this, it should maybe fixes it


#7

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