I’d like to change image size when scrolling.
For example when the page is loaded, the image is in the centre.
When scrolling down, the image should be smaller. This should work also in other direction.
For better understanding I’m looking for result similar to this.
I’m sure this animation can be made with Javascript but I’m not familiar with this language.
As You scroll down the page the image shrinks - all sizing and positioning is done in the “Main Timeline” using Hype’s interface - easy for You to change to fit your needs without coding.
Note: There is a JavaScript function (“controlTimeline”) that matches the vertical scroll position of the window to the Timeline. The only reason You would need to alter this JavaScript code would be if You had timeline other than the ‘Main Timeline’ to control. In that case simply change the Timeline name to the desired one.
I'm working on a similar project, but I have a problem
If I create copies (even with a symbol) on the same page, all animations start at the same time, all instances in the rest of the page.
There is a way to start the scrolling animation when the symbol is in view? to use more than one.
Make sure the size timeline is inside the Symbol
Then makes sure all the symbol Start Main Timeline action for each symbol instance are removed from the Main Timeline of the Main Scene.
You can then use waypoints/On Enterview Point
Then you can do something like this example.
If using On Enter Viewpoint
I would use an element inside the symbol ( opacity 0 ) which should allow you more adjustment of where the enter point is.
We add @MaxZieb 's hypeDocument.getSymbolInstance extension to the Head so we can easily get the element's parent symbol
You do not use ScrollTop per se to control the timeline, rather you increment the current time in the timeline by 0.1 ( or some number )
In this example we also compare the last scrollTop to the current scrollTop.
These are used to try to know if going up or down.
This example is by no means perfect but should give you an idea. ( you probably can look at some of the parallax posts for scroll control but the main take is the symbol setup)
I'm having trouble with the scroll speed.
If I scroll fast enough some animations don't start or stop if the symbol already appears at the top or in the center of the page.
It looks like a trigger delay in the symbol, with many symbols in the page the problem grows. I don't know if it's a bug or normal trigger behavior due to scroll speed.
I would like to try with very large symbols to see how they work
Thanks
The quick start will explain the simple steps.
But just add the CDN link to the head <script src="https://cdn.jsdelivr.net/gh/markhunte/Hype_Symbol_Override_Extension@main/symbolOverride.min.js"></script>
Go into the symbol and select the text box, set an Extended Attribute on it to
Key
data-message_text
Value
innerText
Exit the symbol.
Select all the symbols and set an Extended Attribute Key on them all to the same key that's was used on the text box
data-message_text
And then individually select each Symbol's Extended Attribute data-message_text
and set the Value to your text.
The Documentation pages give you more ideas on other properties you can use.
and did you have a look at @MaxZieb's HypeActionEvents¿
it'll offer (among a ton of other things) intersection-event with minimal scripting involved. swans.hype.zip (1,8 MB)
//////
regarding intersection i just remembered that i had an old approach that may work completely without scripting: Track Intersections between Hypeelements
though the swans-file above should be easy to manage
@MarkHunte grazie! both examples are very useful, customizing the text as well. I don't need it right now, but it's a clever trick.
After some tests i prefer your first solution, just because I can set the trigger position in the scene and i love the behavior of the animation.
While not perfect (due to scroll speed) it is very elegant!
Yes thanks!
interesting approach, it's an idea to use it in another project, thanks!