I want give Timeline this refer Scrollbars of Group name CGI. By that not about Scrollbars main of Browser


(bookwsm) #1

I want give Timeline this refer Scrollbars of Group name CGI.
By that not about Scrollbars main of Browser.
Help look Code give I bit.

	var navbar1 = hypeDocument.getElementById( 'navbar1');
navbar1.style.position = "fixed"; // fixed position for Navbar group

window.addEventListener('scroll', function (e) {

	hypeDocument.goToTimeInTimelineNamed(scrollY * 0.01, 'SC_LINE')
	

});


#2

@book.ratthanan

An example Hype document with this set-up would be very useful.


(bookwsm) #3

:rofl::rofl::rofl:


#4

I am not understanding… sorry!


(bookwsm) #5

Means the article that i post go yes or not?
I Sorry. I untalented language english.


(bookwsm) #6

I wanted give it work in Scrollbars of Group name CGI.
:rofl::rofl::rofl:


#7

I untalented language english.

That is OK… we will do our best to help! :grinning:

Please post an example of your “Scrollbars of Group” Hype project here for the Forum to see - like You did for your question about “Parallax work normally.YY”


(bookwsm) #8

I wanted give Elements upper part “Fixed” and play animation timeline name “Scroll” according scrollbar of Group name “CGI”.

I am going to do “Responsive” now. https://www.youtube.com/watch?v=akB5F4xHUYc&feature=youtu.be
Normally, if a single group There will be space at the end.
I’m building a complex group.Maybe you do not understand the purpose of me.

Sc_mh.hype.zip (94.2 KB)


#9

I won’t be able to look at your example for a while - may be someone else can offer some guidance before I have a chance to look at it.


(bookwsm) #10

OK, thanks a lot. YY"


(bookwsm) #11

Hi JimScott.
Will is made how not give have area part below time minimize of Browser.
What is the code to be defined?

Untitled


(Mark Hunte) #12

Hi two things.

This post may help you.

Also

You could try to also post along with the english your native language .
Someone on the forum may speak both and have a better understanding of english and be able to give us a better idea of what you want to do .


#13

@book.ratthanan @MarkHunte

Here is the file that @book.ratthanan provide above, I include it here again for convenience:
Sc_mh.hype.zip (94.2 KB)

I think the issue is that no scroll bars are appearing on the main group “CGI” (even though specified) and the scroll bar is needed to run a timeline.

There is a function “scrollto” in the project that matches this set-up:

navbar2.style.position = "fixed"; // fixed position for Navbar group
	
	window.addEventListener('scrollto.onscroll', function (e) =  {
	
		hypeDocument.goToTimeInTimelineNamed(scrollY * 0.01, 'scroll')
		

	});	

The timeline named “Scroll” (uppercase “S”) that drops down a rectangle named “Bar” (potential menu?).

============================================

Additional Edit:

@book.ratthanan you wish the “CGI” group to scroll separately from the rest of the page - is this right?

If so the “scrollY” in your “scrollto” function will not work. “scrollY” is used in reference to the browser window so scrolling the “CGI” group will not register any change in “scrollY”.

You will need to use something different - maybe use a “scrollTop” calculation for the “CGI” group scrolling, so as the group scrolls you need to continually calculate the distance from the top of the"CGI" and control the timeline accordingly.


@book.ratthanan You seem to also be asking another question which has shown up in another post as well:


I will not be answering that one in this post.


(Mark Hunte) #14

Note,
I replaced @book.ratthanan original example which was a beta version file with Public hype version file . (Yesterday)


#15

@book.ratthanan

This is a very basic demo: Sc_JHSv1.hype.zip (46.0 KB)

The “File” group now has scrollbars, and scrolling this group animates the “Bar” element to slide down.

This “File” group now has a class name of “noHorizScrollBar” which is used in a bit of CSS inserted into the “Head HTML” to get rid of the horizontal scrollbar that otherwise would appear on the “File” group:

.noHorizScrollBar {overflow-x: hidden !important;}

I’ve moved the (nav?) “Bar” outside of the “File” group so it does not need to be sticky - nor could I get it to be sticky inside the “File” group (which is why I moved it outside :wink: ).

I found the below “scrollTop” code created just for us by @MarkHunte in this post.

@MarkHunte’s adapted code is used in the function “animateMenu” replacing “scrollto()”:

/* we don't need these any more
	var navbar = hypeDocument.getElementById('navbar2');
	navbar.style.position = "fixed"; 
	*/
	
	var file = hypeDocument.getElementById('fileHolder');
	
	file.addEventListener('scroll', function (e) {
		hypeDocument.goToTimeInTimelineNamed(file.scrollTop * 0.004, 'animateBar')
		//console.log(file.scrollTop);
	});

#16

What original example was swapped out?


(Mark Hunte) #17

Hah, just PM’d you


#18

Thanks. Changed my reference link to @book.ratthanan’s file.


(bookwsm) #19

Thank you so much to everyone here, I want to thank you very much, really. :rofl::joy::rofl::joy: