Best Scroll Javascript

1

Hello,

I tried many scroll methods by Javascript on the forum, to exactly, all of them.

I noted that there are lots people trying to find the the best methods for scroll at fixed position.

Personally, I think the following one is the best one, that support scroll multiple timeline, multiple elements, multiple layouts, and support sticky at the fixed position. However, the most important is that the scroll process is very smooth.

Hope it can help you:

and here is a Hype demo file:

scrollMagic_multiple_timeline.hype.zip (440.1 KB)

5 Likes
4

Hello alexlii,
thanks for the report.
Is it possible to also control the timelines of the symbols?

5

The answer is: yes, it is possible, but not currently with the code in that example.

It is probably an easy modification to make, but would require knowing:

  • do you want to control a single symbol instance, or all instances of a specific symbol based on its symbol name (even if it is just one)?
  • do you want to still control non-timeline symbols?
6

Thank you Jonathan!
I just want to check the timeline of a symbol.
With this script I can control multiple timelines, but not those within a symbol.

7

Hmm... I thought this would be an easy modification, but scrollmagic seems to have issues when elements are embedded in other divs, like how symbols or groups work. In fact you can see that the example fails if you just add one of the elements to a group.

I searched through their documentation and couldn't find a mention of this problem or solution, so perhaps there's some interaction in hype's absolutely positioned groups that is unexpected from scrollmagic.

You may want to find a different way to do the control...

8

Thank you jonathan
ok no problem, I will find another solution to bypass the problem.

1 Like
9

Sorry for later response.

Actually, the Element A, B are in the timelines:

Screen Shot 2024-01-11 at 15.39.38
Screen Shot 2024-01-11 at 15.39.381098×907 139 KB

In the javascript, there are timelines:

var elementsToPin = {"ScrollMagicScene1":['#aaa',"timeline1"] , "ScrollMagicScene2":['#bbb',"timeline2"] }//aaa,bbb are unique ID

10

This is clear to me, but I want to control a timeline inside a symbol

11

I just doubt if you checked my original sample file.

However, you can upload your sample file here and let us know what you want to achieve, and it will be much easier to get help.

12

@Jonathan , @Vik

Sorry only just came to this thread

I converted one of the old examples to use symbols.

My original one on e the below thread ( derived from Alexii's ) could be used with attributes and Groups already.

Please don't ask me to go over it as I barely remember what I did last time and have not revised it all, it is a little bit complex.

Read the original thread

But all I mainly did here was transfer every thing to a symbol, and transfer the attributes and class name I had on the group to the symbol instead. Then change the code to use the symbol instance.

scrollMagic_multiple_timeline_Grouped_Symbol multiple_elements_twoJSMHClassNames.hype.zip (34.3 KB)

1 Like