I was wondering if it would be possible to recreate or make something similar to this site within Webflow.
Here’s the link: Outdoors Template | Codrops
Thanks!
Looks possible. You’ll just have to have an interaction for every single item, like each character of the words, and use the right easing function
Yea I think I can picture how to do everything but the sliding images. I know there isn’t a vertical slider within Webflow but does anyone know how to replicate that effect specifically?
For the text effect, it looks like that site breaks out each character into a separate element and then animates each individually:
Typically this is done with plugins like:
- Moving Letters | Text animated with JavaScript & anime.js
- http://textillate.js.org/
- SplitText Text Animation - Products - GreenSock
This is something we’re considering adding to Interactions 2.0 as “text effects” (to build on top of Quick Effects), but for now you’d have to do something like this if you wanted to do it purely in Webflow:
- Use a Heading to write out your text
- Select each character, and wrap it with it’s own span:
- Create a multi-step timed animation that has a slight delay on each character based on some trigger
Or, you could give that heading an ID (on the Settings tab at the top), and then add some custom code to use the Moving Letters plugin.
For the sliding images, I bet you could use scroll triggers too to animate images - but can’t think of the technique right off the top of my head 
3 Likes
Hi Vlad, thanks so much for the tips. As far as the scroll trigger goes would I be able to have those trigger along with the text in a single button press? I don’t have a ton of experience with interactions 2.0 so I’m just a little confused.
Hey @alex98, yes you can have multiple elements be affected by the same trigger in Interactions 2.0 - here are some tutorials that might give you an idea of how that works:
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.