Streaming live at 10am (PST)

One of the interactions isn't animating when two interactions are created for a single element

Hi Webflowers,

I’ve been trying to create two interactions on the same element. But somehow it refuses to animate both. There is a page trigger which animates after the website is loaded in which the element fades in. Afterwards there is a element trigger in which there is a scrolling in view parallax effect. Both animations work perfectly individually, but when both are enabled at the same time Webflow chooses to animate only the Element trigger. There is this small, almost unnoticeable, buggy animation of the page load interaction. Which tells me that the animation is there, but something is conflicting.

TLDR: Is it possible to give a single element an element trigger and page trigger interaction?

Thanks in advance!


Here is my public share link: link to Webflow

Don’t target an element several times with IX. Instead, nest as many divs as you need to have extra wrappers that you can target.

Worked just as you said. Thanks Vincent.

1 Like

Great :slight_smile: Now that you get this principle, to not put too many, or several IX on one element, you can also extend it to Styling (CSS).

Back in the days where we had a lot of browsers issues — especially with IE6 — it was a good practice to nest divs more in order to avoid box-model interpretations bugs. You’d put the margins on an outer divs, the padding on a div inside, the rest of the box styling on another div inside (bg color, bg image, borders, columns…, then the content and its general positioning on another div inside. So you had 4 divs when you thought you could just have one.

This was technically and semantically correct, anyway.

Today, even with Webflow who’s good at producing cross browser code with minimum, rare issues, I still do that. It has a lot of advantages. Here’s the strategy:

  1. never style Webflow’s components: columns and columns wrapper, container, sections etc. Don’t styke them or style them to the minimum to alter their default values (for example the height of a Slider element).
  2. never put content directly inside of a Webflow component: always put a div inside, name it “content” something, and put the content inside of it. This way it will be easy to duplicate the content without having to duplicate the component.
  3. always use % for width and height of “content” divs, so that you can copy and paste them into another element and they will shrink or expand depending on its size
  4. so between a component or an outer div and a “content” div, nest other levels of divs: one for the dimensions and positioning (call it “layout” something), then inside, one for the IX (name it “trigger” something)…
  5. if you’re going to use 3D and transitions, nest another div for that. And inside of this one, put the “content” div.
  6. put the HTML5 tag (section, article, footer, etc.) on the “layout” div if there is no more obvious element to put in on.
  7. on the way doing all this, use CSS inheritance as much as you can. Set everything regarding typeface (family, sizes, colors etc) as high as you can, so you can reuse the full content div structure in another context, and you have way more power to craft effects built on states (hover etc).
  8. if you’re using element for onclik or onhover IX, and if they’re not a HTML link, don’t use links or link blocks. Use a div, and give if the hand cursor. Never use a link if there’s no link on it, it’s not good for accessibility.

If you deal with 3D in styling and IX, put Children perspective at 2000 on the “layout” div, and then don’t bother touching at perspective value for any of the children element. In most of the case, setting the child persp on the outer div is enough and prevent a lot of troubles.

tl;dr nesting is perfectly fine, sane, will prevent issues and will help future design and maintenance. Nest.


Vincent - your guildelines are GOLD! Webflow needs to publish these dos and don’ts as just following the videos don’t cover these real-world issues that come up!