Streaming live at 10am (PST)

Complete control over your business website design | Webflow


#1

Hello guys! Greetings to you all.
I was wondering if anyone can share some light on how the interactions on this page was done.

Especially the automated text reveal – moving up and revealing another heading.
This insight will be much appreciated.

–Si™


#2

Thats a hefty question haha… It’s all done, with interactions 2 though using “While Scrolling In View” I option. He set a certain height on the main div for that section you are referring to and then targets the different headings the move on the Y axis when he gets to certain points during the scroll.

Those headings I would imagine are in a div with overflow set to hidden so you can set them. It’c complex as in there is a lot going on but you can really learn everything you need to know about interactions and how they’re used here: https://university.webflow.com/lesson/triggers-animations-interactions


#3

Thank you @J_Canan.
I have a grasp over interactions very well. However, I have thought so much about this, however, the animation of the heading text are not based on scroll. It’s automated, you get me.

We need to figure out a way to let this happen.

Gratitude bro! Much appreciated!


#4

Hi @siddris14

I think it’s a on page load loop animation :slight_smile:


#5

Greeting bro @donaldsv Thank you for your contribution.

I want to know then that how can we set up this loop or auto animation.

Gratitude big man!


#6

Yeah the header I would assume is on loop. I thought you might be referring to the dark section.


#7

Here’s a preview link, I don’t have time to make it looks perfect but it gives you an idea :slight_smile:

https://preview.webflow.com/preview/loop-scrolling-text?utm_source=loop-scrolling-text&preview=03acee1cf5f000377a6dedff4116b838


#8

Big man @J_Canan,

The same animation is basically at the dark section. I will make it clear to you exactly what I would like to know.

The main Text YOUR BRAND! and the way it’s masked and looping animation.


#10

Broooo… Thats amazing man! Well done. I will ask your permission to break down and rip your project apart. hahahahahahah

Much appreciated bro! Bless big man!


#11

Hahah go for it @siddris14 Have fun!


#12

On the actual site: Brand is duplicated and put at the bottom for a seamless transition… Also the site graphics to the right of that are duplicated 4 times in groups. It’s pretty amazing how he has constructed this thing!


#13

Spent a little more time on to get it seamless. What do you think? @donaldsv @siddris14 Was a good challenge.

Preview: http://brand-design-site.webflow.io/

Cloneable Link: https://webflow.com/website/brand-design-site?s=brand-design-site


#14

Awesome! it looks perfect! :smiley:


#15

@donaldsv Thanks so much man! It was fun to do! :wink:


#16

@j_canan Thank you very much brother. You are awesome. Much appreciation!


#17

Nice job dude - that is looking sweet!