Scrolling and animation linked to scrolling


(Florian Gampert) #1

What do I have to do to make scrollable elements on the canvas while other elements are fixed. And how does scrolling in general work?

My second question is how it is possible to link actions/animations to scrolling. For example when Im scrolling down a picture scales up – the animation should be linked to the scrolling.

Greetings


#2

There isn’t currently a way to create a 1:1 / scrolling:animation link, but you can trigger animations after scrolling down past a defined point. This post explains how to do that: Viewport / Waypoint actions in Tumult Hype: Starting an animation when an element is visible


(Florian Gampert) #3

How does scrolling in general work?


Parallax scrolling of various objects
(Trey Yancy) #4

You have an example at:http://blog.tumult.com/2014/08/06/tutorial-easily-create-parallax-effects-and-single-page-scrollable-experiences-in-tumult-hype/

It works great on one direction. how do I get it to run backwards? (Example - Apple iPhone page - tall site, various element moves - both forward and backward - are triggered when you scroll within range of each section.)

Also, is there a way to do this via the vertical scroll bar?


#5

Hi Trey

Here was something I was working on. It shows a simple function on scene load that dynamically updates the position in the animation timeline as the window is scrolled. So as you scroll up and down the timelines move back and forth. Also added some other on enter and exit viewport actions. This might give you an insight in to how to adapt it to suit your needs.

parallax-vDBear.zip (2.5 MB)


How to Make Objects/Elements Rotate Whenever a Page is Scrolled Down or Up
(Anton Kuznetsov) #6

Wow, thanks for that example!
Could you please shed some light on why did you make the scrollMNEK behaviour?


(David Guillermo Escalante Trinidad) #7

I have dealing with this same problem. While the scrolling forwards works nice, going backwards doesn’t work, and when it does its quite buggy, sometimes it goes backwards and other its goes forward again.