Control "symbol timeline" scrolling

[petemanzel (Pete)]

Hi,

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!

scrollClock.hype.zip (22.4 KB)

[MarkHunte]

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;
			
			console.log(scrollAmount);
			 
	var secondsHand = symbolClock.element().querySelector(".secondsHand");
	hypeDocument.setElementProperty(secondsHand, 'rotateZ', (scrollAmount * 6))
		}

scrollClock_mhv1.hype.zip (24.5 KB)

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

World Clock Template/Symbol

Here is a Clock Template, The Clock is Saved as a Symbol and Can be duplicated. Each Clock can have a Different time displayed using Timezone Names as the Symbol Id. These version are later than on the original post I made these for. [image] To add to it simply duplicate a clock Symbol & drag it onto the scene. Gve the new Symbol an ID. The ID needs to the timezone name for the place you want the time for. i.e Europe/London Place like the USA may do things slightly different. i.e New Y…

[h_classen (Hans-Gerd Claßen)]

scrollClock_playground.hype.zip (25,2 KB)

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

[MarkHunte]

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))
		}

scrollClock_mhv2.hype.zip (24.8 KB)

[h_classen (Hans-Gerd Claßen)]

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

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

scroll | Motion One

[petemanzel (Pete)]

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?

Thanks!

[MarkHunte]

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

[h_classen (Hans-Gerd Claßen)]

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

[petemanzel (Pete)]

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.