I create my portfolio site by hype , just like ios appstore today app, but how can i control iframe scroll?

Using JavaScript with Hype
,
1

hello every one, I work it A lot of days， you can view the site online with a version have no "appstore today animation" ， on the url : http://kelsoz.com/

I have create every card to symbol ,in project i want do:

  1. click Card, and the card up to the top of view, scale fit to The width of the screen（i did it by card timeline in symbol ）

  2. the was a iframe obj in symbol, after timeline animation, i load the target url html in this frame

3.after load it , i can scroll up and down the iframe , and when I scroll up, the card symbol must up synchronous 。

  1. when I scroll to top , i will return back to main scenes, you can look at Screen recording I have upload.

I have search lots of post in our forums, and I have no idea how to fit this , help~

this is my project file

portfolio site like ios appstore today.zip (1.6 MB)

this is ios appstore today animation Screen recording

1 Like
2

not deep in your project, but messaging is the route to go ...

the iFrame sends an event along with some data and parent window receives it ... this works bidirectional ...

in fact @MaxZieb wrote an extension that can connect hypeinstances... Hype Global Behavior (Custom Behavior Extension) ... this may help too

3

I think this would be fairly tricky to do and require custom code. Of course it is feasible, but here are some specific challenges to overcome:

  • you would need to animate something that could be scrolled anywhere on the screen to a position fixed on the viewport. Basically I'd look at the element.getBoundingClientRect() method and then probably have another layer that is positioned via fixed that interprets these coordinates and animates something to scale in
  • you'd need to pre-load content or have some sort of "cover up until loaded" strategy to make it seamless when content comes in. It may be worth it to potentially not use iframes, since it is harder to know when those are fully loaded and perhaps use alternate scenes. This could help with scrollbar management as well.
  • You'd need to make sure any manually changed data gets reset properly, either in just clearing states or returning to old states.