Streaming live at 10am (PST)

Interactions 2.0 Trouble


#1

So I pretty much love everything about Webflow, but I’m worried about the new interactions taking over for the legacy interactions. I appreciate the new functionalities that IX2.0 introduces, but I was so accustom to the legacy interactions and in my opinion, the new ones are not NEARLY as intuitive or convenient to deal with. I want to be open to this change as there’s a good chance I’m just missing something, but so far not so great.

My current issue is that I have several of these little red “horizontal rules” that I’m wanting to animate when each one scrolls into view individually. I have a 15% offset on all of them and yet they all just animate at the same time. I’m struggling to wrap my head around this new and “improved” way of implementing animations to our sites and how to create a single animation that works for all elements with the same global class.

Please take a look at the share link below to help me get on the right track with this thing so I’m not entirely screwed when it comes to the omission of my beloved legacy interactions.


Here is my public share link: LINK
https://preview.webflow.com/preview/rhmamas?preview=8a50b6c2ed4fb3e918d6d7cfe491d15c


#2

HI @Spencer_Irwin .

As far as I can see, you are using the same class name on all of your red ‘horizontal rules’, so if you add a different second class name to them, I think you will come a long way on achieving your interaction. I would also try to use *While page are scrolling’ when setting the interaction. You can then use the About section as the trigger.
They do the same when creating parallax scrolling, only then they set different ‘speed’ to create depth… in your case, you can just set/mark off where on the page the interaction will start. Click on the trigger item (About section) and then the preview button in interaction panel and start scrolling down. A % will show how far down on the page you are, and that will show you where to set each interactions for the HR’s like I did in the video below. (That said… I did not give each HR a second class name in this video, nor did I set the size… just showing you how to make the interaction appear at the right time).

https://app.hyfy.io/v/abygCfx20aU/

Link to parallax course: https://university.webflow.com/article/parallax-movement-on-scroll

Hope this helps a bit.


#3

Hey @Sven_Erik_Slattedale!

I appreciate your response and the video demonstration as well! That seems like a pretty solid alternative to what I’m wanting to achieve for the time being.

It sort of blows my mind that there isn’t a way to target a single class to animate once it appears in the viewport with a specific offset. In fact, I could do this easily with the legacy interactions but since they are doing away with the legacy interactions I’m trying to use the new way so that I’m not totally lost when they DO get rid of them.

Again, I appreciate your help and will watch your video again in order to figure this thing out!


#4

@Sven_Erik_Slattedale

I literally just did exactly what I want to achieve in the 5 minutes that have passed since I sent that last message. However, why is this so difficult to achieve with the new interactions??? Thanks man!


#5

Hey @Spencer_Irwin !
So happy to hear that you achieved exactly what you wanted!
Why this si so difficult to achieve, I think is a good question, and I don’t think I have a good answer for you. It might be because Interaction 2.0 is new, and work a bit differently from the older one… I mean… when you are used to something, and managing it well, it can be a bit of a challenge to adopt to something new that also work in a different way. In my personal experience, I actually had more difficulties learning the legacy interaction, than interaction 2.0. (still got a lot to learn about Interaction 2.0 though). To me it was more like ‘cracking a code’ on how it works…
Anyway… I’m glad I could help, and happy you solved it!
Keep up the good work! You’re very talented!


#6

Thank you @Sven_Erik_Slattedale. I appreciate the compliment! I’m also glad you’re having a better time with the new interactions than I happen to be!

In my opinion, IX2 is an amazing and welcome add-on for things like parallax scrolling, time-based scrolling effects, and loading animations that weren’t attainable with the legacy interactions, but in no way a suitable replacement for the legacy interactions at this point.

Take care and thanks again for your help!