Parallax scroll help

scrolling

(Lochli Istvan) #1

Hello everyone. Despite all my efforts, I could not solve this problem. The movement is working but not when I use the scroll function. What solution do we have? You can find the example here.

parallax-mattress.hype.zip (598.4 KB)


(Jonathan Deutsch) #2

It seems to work for me (see video). Are you still encountering issues and if so can you elaborate on the problem? Could it be a device/browser specific issue?

(P.S. it is a really nice effect!)


#3

Even my mobile says nice effect.


(Pete) #4

@lochlistvan here you go I made it for work for you
parallax-mattress.hype.zip (591.8 KB)

@lochlistvan it works for forward timeline but not for reverse. The rule is defined in the script to work reverse but it doesnt work let me look into this. Heres a version that does allow you to scroll up and down forward and reverse.
parallax-mattress-PB.zip (592.7 KB)


(Pete) #5

parallax-mattress-PB-refined.zip (605.7 KB)

I was moving some documents around and stumbled upon this rework and noticed it was off the value >2 where the default reverse direction would always go to 2 seconds leaving the reverse direction to start again from 2. So really it has to be 0, that’s where the animation should start from and end when scrolling forward/reverse. Additionally one of my action stops was a continue rather than a pause.

(hypeDocument.currentTimeInTimelineNamed('Main Timeline') > 0))

I should also mention this works but overrides the global scrolling when added as a widget or a banner?

Im looking for a code that would work if this is added to an existing non Hype related site. There were a few examples by @DBear, @JimScott. Id Imagine it would have to be a variable thats on window scroll?


#6

Hi Pete!

Here is an example that @h_classen did: scrolldrag.hype.zip (75.2 KB)

This example does use a timeline (as do all the examples I’ve created) but You probably could adapt this to a non-Hype environment by substituting the element properties (“left”, “top”, etc.) You wish to control for the timeline “tracking”. Note the “settings” function where You can establish granularity as to how much the amount of scroll affects the particular element property(s)… in Hans’ project file it is the Timeline of course.


(Loves Hype) #7

I can’t look at the code as I am only on iOS. In general it is best to use a measurement from the local element as using absolute values like scrollTop have to be cleaned against responsive folding and therefore variable offsets. A local visibly can be determined with the some math (subtracting getBounds etc.) or with something like https://github.com/vissense/vissense (you posted it the other day, but it hasn’t been updated for two years).

To use a modern approach use IntersectionObserver with a polyfill. Given that these methods give you a percentage of the visibility of an element in the browser you can use that value to adjust a timeline in Greensocks, values in jQuery or vanilla JS (like a negative margin or position).