Streaming live at 10am (PST)

Problems using scroll trigger on one element to affect another element


#1

Hi there,

Hopefully someone can help - I've done some reading in the forum and watched some tutorials but haven't managed to come across a definitive answer on this as yet, but apologies if there is already a topic for this (I saw a couple but they didn't seem to have answers).

What I'm trying to do is this:

This is a very quick test so please ignore the roughness of this :slight_smile: but in my design file you will see a laptop in the centre, with a website on the screen, where it is possible to scroll down the website within the laptop screen area. I then have a title and paragraph on the left (class: leftStuff) and the same on the right (class: rightStuff). I am trying to set up an effect where if the user scrolls down the website within the laptop screen, text is revealed from the left and right. I've tried setting up an interaction for leftStuff with an initial appearance of 0% opacity and -100px left position ("Hidden Stuff on load"), then on the container with the scroll (class: screen), there is an interaction triggered on scroll to have 100% opacity and back to origin position, then scrolling out of view does the opposite again ("Show the hidden stuff").

I'm not sure if this is the correct way to try to do this, but looking at the settings it seems possible to do in this way, but in preview mode, leftStuff just stays in the initial appearance of 0% opacity, so isn't visible, and scrolling does nothing. I've tried various values in the offset option but the result is the same.

Am I going about this the wrong way or is it not really possible to do this?

Any help would be greatly appreciated and thank you VERY much in advance!! :slight_smile:


Here is my public share link: https://preview.webflow.com/preview/sarah-stewart-s-five-star-site?preview=7d97c68d8467bba240a98cdc3c87f6ff


#2

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