Control "symbol timeline" scrolling


i am trying to control the timeline of a symbol by scrolling the mousewheel.

If i control the main timeline outside of the symbol it works but if i try to control the timeline inside the symbol i do not even get the output of the function.

Thanks for any help! (22.4 KB)

It is working.

But the setup on a non scrolling scene and using a timeline and scrollY is not working well as far as I can tell.

You may want to change the code and use the setElementPorperty 'RotateZ' to rotate the bar element.

This will also allow reverse a bit more simply
You will still have a problem with scrollY though. As it will st spring back when you stop.

code below does not use timelines.

	var symbolClock = hypeDocument.getSymbolInstanceById('clock');
		window.onscroll = function () {
			var scrollAmount = scrollY;
	var secondsHand = symbolClock.element().querySelector(".secondsHand");
	hypeDocument.setElementProperty(secondsHand, 'rotateZ', (scrollAmount * 6))
		} (24.5 KB)

I did not deep dive into this but I referenced one of my old posts

1 Like (25,2 KB)

just as a playground :slight_smile: the scrollprogress is taken from the element scroller ...

1 Like

Nice one @h_classen ,

Had a play with your idea,
You can get the same effect without the motion library by using a group set to be bigger than the scene ( to hide scroll bars with out css code etc) and the scroll element inside the code uses scrollTop

	var symbolClock = hypeDocument.getSymbolInstanceById('clock');
	var scrollingEl_  = hypeDocument.getElementById('scrollingEl')
		scrollingEl_.onscroll = function () {
			var scrollAmount = scrollingEl_.scrollTop;
			var secondsHand = symbolClock.element().querySelector(".secondsHand");
			hypeDocument.setElementProperty(secondsHand, 'rotateZ', (scrollAmount / 1.2))
		} (24.8 KB)

1 Like

Yes, of course Motion is not necessary ... It was just me interested in Motion :joy:

and: it comes along with some nice features ...


Thank you all!

How do i control the rotationspeed of the hand so that i have to rotate my wheel 24 times to have a full rotation of the hand?


Can you explain fully in detail what the goal is please.

easiest would be to do a timeline for the rotation, add 24 stoppmarkers and just continue this timeline on scroll ... no further calculation ...

Shure! Sorry for the missing details.

I have a usb-knob that behaves like a scrolling wheel of a common mouse and would like to create that watch-animation that triggers a new animation everytime the hand hits a new hour marker on the timeline. For example: The hand touches a.m 7.00h -> an animation is triggered.

Right now the hand spins superfast and i would like to be able to control the speed (one full rotation of the knob=one hour on the watch.