Streaming live at 10am (PST)

Fade in and Move Up


#1

Hi!

I'm trying to create a simple interaction in which a row of divs fade in and move up about 20 px on scroll. Can anyone help? I've watched the tutorials, but the UI is different enough for a newbie that I'm having a hard time figuring it out without a lot of trial and error. :grinning:

Thank you! :grinning:


Here is my public share link: LINK
(how to access public share link)

https://preview.webflow.com/preview/nanatoo-export?preview=5d0530b35ca1a0c6d5ccfbcce5b9643e


#2

Hey @tkister

I've made a quick little tutorial on how to do a simple scroll fade interaction:
http://quick.as/m5B8T6jmR

Hope you can figure it out :wink:

Michael


#3

Thanks, DharmaNode!

Very generous of you to take the time to do this! :grinning: It would have taken me ages to figure this out through trial and error.

It's almost perfect. (Except it moves down instead of up.) I'll play with it and see if I can change the direction.

Thanks again! :grinning:


#4

No problem!

If you want to make it move up use 20px instead of -20 on the initial interaction.


Detailed Steps for Working with Interactions
#5

LOL. At this point, I don't even know which value that is.

I'm typing up the steps so I can play with the values. (I'm a nerd and prefer to read text. :eyeglasses:)

There are 29 steps. That's a lot! :grinning: No wonder I was struggling...


#6

but imagine all the things you'd be learning at the same time :wink:

IMO, life is all about the journey, not the finish line.


#7

If only I had the luxury of unlimited time. :yum:


#8

Yay! I got it to work!

Unfortunately, now when I preview, all of the animated elements are gone. I hope I'm just having connection issues...

I just saved, so I'll try again tomorrow, and share the written steps. (I think there are extra actions in the video, so there aren't as many steps as I thought.)

Yay! :grinning:


#10

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