Interactions Where One Element Triggers Another Element's Animation

Regarding the title of this post, if this is possible now, I’d love to know, but I don’t think it is possible now. It seems like it should’ve been here from the start. I want to be able to create a button, totally full opacity, and click and something elsewhere on the page fades into view, from zero to full opacity.

I figured out a way to do this a section. Make a button, position it on a page, make it’s position fixed and -1 Z index, and then position a section on top of it with a Z index of 0 or 1, with an element inside, such as an image, perhaps positioned on the opposite corner of the section from where the button is. Make the interaction on that section, from zero to full opacity on click. Then, when the user goes to click on that button, they are actually clicking on the invisible section, and the whole thing fades in, making the image fade in.

But this will not work with other kinds of interactions. Any prediction on when interactions will be separated from the element to which the animation is happening?

You can do this currently with interactions.

Take a look at this tutorial video.

note that the UI is different in the video then the current UI.

Alex

O-W-Alex, thanks for the answer. That was very helpful.

I think that just allowed me to figure out another thing I had been vexing over. I wanted to create a parallax effect without any outside code. The concept I have in mind is that there would be a three-layered image, foreground, middle, background. I want this to start out sort of vertical, and a Scroll interaction will cause it to sort of close up, with the background moving down and foreground moving up. This is fairly common effect.

An issue that was giving me pause was that for the scroll effect to work it seems that the elements need to be below the viewport. But I want this three-layered image to be at the top of the page, just below the navbar. So, now I know I can place a trigger element anywhere, like a button or whatever, probably can make it zero opacity and just below the viewport, and have that, when scrolled into “view,” trigger the animation of the three-layered image, at the top of the page.

Obi-Wan,

Since you were helpful with the last, related question, I thought I’d put this back to you, or whomever wants to help out. I think I created a pretty cool technique, but there must be something small that’s wrong with it. It’s almost doing exactly what I want, moving slightly on scroll.

I used the method in the video link above, but used a scroll animation, and a pair of invisible divs to trigger movement in two images (two layers of a three part image). It’s supposed to start out with the images pulled apart vertically, and then close up when the user starts his/her scroll, and get pulled apart again when scrolled in the opposite direction.

For some reason, it’s not starting in the right position. I tried an initial appearance but that didn’t work.

Oops. Here’s the link: Webflow - stephens_experiment1

And here’s the link to the published version, which I think acts slightly differently than the preview version: http://stephens-experiment1.webflow.io

There are some great examples of how to implement parallax on Webflow.

The ever great @PixelGeek made a great tutorial about implementing it.

I think it will help you a lot,

Alex

Thanks Alex, I appreciate it, but I had researched everything there was to offer on Webflow, including Nelson/PixelGeek’s tutorials, and they all boil down to either use a script from someone else or a very basic, make an image a fixed background image so that when the user scrolls, other elements including text, etc. scroll on top of it, which is not really that complex an interaction.

I think in light of those other samples, my method is pretty innovative, because it uses the built-in tools of Webflow only.

And it creates movement of more than one element, in opposite directions, based on a Scroll Trigger separate element, which is similar to the On Click Triggering element technique in the video (thanks again for linking to that), but it seems that no one had done it with Scroll previously to create a parallax effect. I just need to fix whatever is causing it to load incorrectly.

This next part is more for the forum in general than for you: I’ve worked with a lot of “wysiwyg” web software before, and I’m dismayed that a lot of the solutions boil down to, use this bit of jquery or javascript, which seems to be not the point of “code free” software. I think a big part of the problem is that almost without exception everyone who works at Webflow started as a coder, and probably a majority of forum users are coming from a coding background. I think for one, they should hire more designers who don’t know how to code, because that’s their target demographic.

I don’t think just because one is copying and pasting that it’s the the same as code free, just because one is not writing code by hand, because a majority of web developers copy and paste code into their code editors as a part of their workflow. WF should be more than a bit of a gui to allow easier code importing, it should do away with code. My goal is to use the built-in UI tools almost exclusively, and I hope where there are tools missing that they implement them soon.

I hear what you are saying. For the most part I think the Webflow staff we interact with on the forum are mostly designers. I am not Webflow Staff but I’m not a coder I’m not even a graphic designer. I am an Urban Designer by training.

For me Webflow taught me more about coding then I every thought it would. I think for many people it is a visual interface for creating code more then anything else.

WYSIWYG editors will never be able to do everything code can do right out of the box. There is just to much stuff and it is changing to quickly. The awesome thing about Webflow is it still allows you to use code techniques that it can’t out of the box.

Also here is @vincent parallax example only using CSS

That’s pretty cool. I had seen that before, but it still uses a lot of custom code, even if it’s CSS code versus JS code. I used to make animations in this program called Sencha Animator, which was a wysiwyg that used only CSS to make animations. There’s also Hype, which I’ve mentioned on the forums before, which uses JS created from within it’s wysiwyg UI, but I can’t figure out how to get that to work with a Scroll action. It’s really great as a complement to WF through the html embed widget. Webydo is a Webflow competitor which does have built-in parallax scrolling animations, but doesn’t have On Load or other animation triggers, so that makes me prefer WF.

I know code is always going to be ahead, but I don’t think it should be five years ahead. I think that it’s great that there’s the option of adding code, but even if it’s a work around using the existing UI seems to be the best solution. I think right now that using an invisible element to trigger some parallax movement is pretty cool. Maybe I’ll make it into a tutorial if I can perfect it.

Alex, I came up with a sample of what I was trying to do with the technique. I posted it into tips and tricks, and acknowledged your contribution.