Four Seasons Scroll

Share your Work
1

A product animation with scrolling via vertical dragging. I may add scroll buttons or another solution. (I’d love to do a mouse scroll but I’m not a JS hound.) Here’s the link:

Vertical scroll example

4 Likes
2

The snow effect is really nice!

1 Like
3

It’s really great!
As an art teacher, I love to make beautiful lessons for my students. I’m still using iWeb (!) and the possibility to use HTML extensions.
http://www.janmac.nl/lessen-beeldend/Ruimte_6.html
My students use iPads in class and I would really like to apply your beautifull effect on a handout. I would like to ask for your Hype document. Of course I will use other images, but I am very curious about your technique, such as fading and the use of scrolling on an iPad.
Thanks

4

To use mouse scroll you would want to add the “scroll” event listener. And use scrollTop to calculate the time.

function scrollAnimation(){
    var timeline = "myAnimation"; // name of your animation
    var time = document.body.scrollTop / 10000 * 15; // based on 1000px high document. trial and error here to get the right figure for your example.
    // Timeline API
    hypeDocument.goToTimeInTimelineNamed(time, timeline)
}

window.addEventListener('scroll', scrollAnimation)

Something like that. It’s a start for you :wink:

Also, to mention, you don’t necessarily have to do this on window you could do this on a particular element or the document.

2 Likes
5

Create a timeline containing the entire animation. Set object keyframes for size, position and opacity. The depth effect (leaves and snowflakes): use duplicate pngs; “foreground” version is zoomed in and the “background” version is blurred; foreground copy moves at faster speed than background version.

I did the scrolling via the old school way - a transparent object between the buttons and the rest, set to control the timeline via vertical drag. Play with the speed of the animation by starting with something really simple - a single object with keyframes for size, opacity, etc., the test it on the iPad to figure out the ideal speed. Mine runs at 45 frames per season. Stretch out or contract the keyframes as needed. To manage the speed, you can insert an empty timeline action once every 45 frames (or whatever your timing is) and delete them when you are done.

The fun part is the responsive layouts. You will have to mess with positions and object sizes.

6

https://www.hightail.com/download/cUJYTGswdVVtNEx2WnRVag [alt]

7

Suggestion re: your images - I see some white fringe on your images. Here’s how to fix it -
Open them in Photoshop and convert to RGB. Select the object (select all, then hold down the command key and hit the right arrow and then the left arrow - this will make sure that the all the pixels are selected and that the object is in its original position).

Go to the Layer menu, select Matting > Remove White Matte

Another option is to select Matting > Defringe and set a width of pixels to select and remove. If you wish, you can create a layer beneath this and fill it with black to see the effect, then remove that layer before saving.

Note that while GIFs create smaller files, PNGs create smooth edges for transparencies. Make sure to use the above selection method to isolate the pixels, then, with the selection active, go to the Image menu and select Crop.

Output the file using File > Save For Web > PNG 24.

8

Thanks a lot Trey!
I already started reading your receipt, but my english is so bad. I’m a person of pictures and, like I mentioned before I try to change documents so they will work at my way.
As an almost 70 years old art teacher I try to understand Hype by tryal and error. For example I used the moving motorcar that Sasha Zivanovic posted to the gallery:
http://tumult.com/hype/gallery/SashaAutoMoto/SashaAutoMoto.html
and made my own bicycles movies by changing the pictures and adjust some things.
http://www.janmac.nl/Testen/testpagina3.html
This is my way to learn how it works and so I get my own ‘movies’.
I’ll try to do the same thing with your beautiful example and when I have finished it I’ll show it to you. But now i’m still working at the ‘space’-example.

Also thank you for giving me a hint about the white frings. I also will try to change that.
It’s great to be part of the 'Hype family!'
Greating from Holland, Jan Verheijen
janmac.nl

9

Trey Yancy, I’ve finished the document and I’m proud of it!
http://www.janmac.nl/lessen-beeldend/Ruimte_6.html
You were very helpfull.
Thanks again

10

Fun animation!

11

Nice work, @TYancy. The animations when you drag look great. ~ John

12

I feel like my post got overlooked here! Should I have even bothered posting? :slight_smile:

13

Thanks for the post. I’m in a situation where the workload is ridiculous to the point of being dysfunctional, without other creative staff and without the head space for teaching myself Java.
Whenever I’ve tried using JS in Hype, there always seems to be some small element missing that prevents it from working and it is not appropriate to expect forum members to teach someone how to use JS. That is something that I have to bring to the table on my own, at which time I’ll know what to do with a script to make it work.
The scrolling issue can be complex, as the height of the objects / groups being scrolled can vary from very small to a couple of thousand.
I’ll get to it when I am at a point where I can delay other projects without causing a catastrophic pile-up.
Thanks again.