I’m trying to build a page using a “scroll jacking” feature, and can’t find a recent post here about this, so thought I’d see if anyone can help.
What I’m hoping to accomplish, is that as the user scrolls down, the slides in the “ABOUT” section scroll up to cover the previous slide, and then as you scroll, the different text animations occur, and then the next slide scrolls up.
I currently have it so the slides scroll up correctly, but the text animations no longer happen. These animations are fairly simple, like having text blocks fade or slide into place one by one, similar to a slide presentation.
I’ve been digging into different tutorials on this, but still struggling to figure out why it’s not working yet. I’d like to try and build this natively in Webflow without adding anything extra if possible. Can someone please help?
To create scroll-triggered animations in Webflow, you’ll need to use the Interactions panel. Here’s how to set it up:
The key is using the “While scrolling in view” element trigger. This allows you to create smooth animations that respond to scroll position. For example, to create a fade-out effect with movement:
Select your element and open the Interactions panel
Click the plus icon and choose “While scrolling in view”
At 0% scroll position, set your initial state (100% opacity, original position)
At 100% scroll position, set your final state (0% opacity, moved position)
You can add multiple animation points between 0% and 100% to create more complex animations. The element will smoothly transition between these states as users scroll through the page.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
I personally would not bother using IX2 interactions. Since Webflow purchased GSAP and added the ability to load it, that would be my choice. Check It out.
I’m still a bit new to Webflow and getting comfortable working with native interactions and building animations. I’d like to stick to that before trying to learn something new.
Webflow is moving to GSAP. It will be the standard. Easier to maintain, more performant. Not hard if you understand structure. I refuse to use Xi2. Your choice.
Sorry that you find my response not to your liking. It is factual and since I don’t use IX2 (GSAP for years) I can’t render assistance. There are others that may be able to.
Sorry, that was probably sharper than I intended. Maybe it was just me, but your second response just came across as all attitude. You didn’t provide any kind of guidance to help me start learning about the solution you suggested, so it felt like a brush off.
I do appreciate the recommendation. But it feels like there’s always a new tool, feature or resource to learn, and I could spend the whole day just learning about the next thing and I would never ship anything!
@markdaniel yes there are a ton of new features continually, the web never sleeps and is constantly innovating. Webflow has to embrace that. Evolve or die.
The GSAP transition is huge for designers, unfortunately until it ships there won’t be docs, tutorials, etc that are specific to Webflow. What Jeff is saying is that you’d probably get more benefit learning GSAP ( google it, tons of content tools tutorials ) than you would learning IX2.
Once Webflow has it integrated that functionality will become more directly point-and-click accessible in the designer, but it’s already available in library form. Even ChatGPT can help you with specific JS using GSAP, it’s that popular.
