Beta Release: Webflow Interactions!

@callmevlad Really like that kinda of thinking Vlad! This is some awesome stuff not having to chase down other .js to make these things happen. @danro @thesergie @callmevlad @webflow kudos!

@Todd Yeah we’re releasing the feature with documentation and short video tutorials.

It’s easy to get carried away with interactions! Especially when you have so much power in your hands to create cool triggered animations. Just be aware of this and try to not overdo it because it may cause more headache than delight for your website visitors. I try to keep interactions subtle and purposeful, not just making things “look cool” (although a touch of cool is needed at times).

@thesergie Cool, looking forward to the tutorials! All I want are minimal/subtle interactions, but I’m unfamiliar with the terms and how triggers & transition animations work in CSS.

@thesergie @danro Great features - I’m really enjoying implementing them!

I am having one issue, not sure if it is just me or not. When using Google Chrome, only the click interaction works, not the scroll or hover interactions. When I go to the same site on internet explorer everything works fine.

1 Like

@danro @thesergie

I just did some testing on ipad (2) and iphone (4 and 4s). The “load” interaction is behaving a little strange.

I have some interactions like:
Move down, fade in (or Move up, fade in)

Sometimes they don’t even show up (only after refresh). Sometimes the interaction looks like it’s cut off. For example a fade from 0% to 100% stops at 50% opacity.

And sometimes they are behaving like:
Move up, move down, move up, fade in. Looks like it’s repeating the complete interaction.

@rowan We’ve noticed this as well. Can you PM me your test site?

I moved a post to a new topic: How to set up preloader

Greetings IX testers… just a heads up: Width and Height have been added!

3 Likes

I moved a post to a new topic: Plugin for constant scroll-based animations?

How would you build the fade out interaction when scrolling down on the following site? Spirito It also fades back in when you scroll up again. @danro @thesergie thanks!

@LaurentCardinal - this is more of a parallax-style, constant scroll effect. We wanted the IX triggers to be focused on clearly defined trigger events, instead of a constant stream of values.

Perhaps in the future, we will consider more fine-grained control over scroll & parallax type effects, but for now, this falls outside the scope of IX.

@danro just to be sure: I really am just talking about the fact that the text goes smoothly from 100% opacity to 15% opacity as you scroll down. I’m not talking about the fact that it “stays” in the middle of its parent section as you scroll.

Yep we’re talking about the same thing. Since the opacity changes gradually as you scroll, you would need to listen for constant scroll events to update the opacity based on the scroll position. This is outside the scope of what an IX scroll trigger is meant to accomplish.

Think of the IX trigger as a single event that occurs when an element is either “in view” or “out of view.”

I moved a post to an existing topic: Plugin for constant scroll-based animations?

@danro is it possible for webflow to add a loop function to the interactions?

We’re planning on adding loop soon!

I moved a post to an existing topic: How to set up preloader

Thanks :smile: @thesergie

Is this based on something like jquery waypoints? If not, it would be really cool if we could still tap into interactions with the same ease as waypoints =)

Hey guys,

this looks great.

I currently use the reveal.js framework for powerpoint-like presentations; do you think I might be better off using webflow and these powerfull looking interactions ?

@bwinslow The scroll triggers should behave similarly to jQuery waypoints. Waypoints has more options, but we tried to simplify for the most common use case. Let us know what you think!

@Michel Depends on your content and which effects you are trying to achieve. IX is primarily geared towards web sites, but let us know if find another creative use for them :slight_smile: